Hover Panes
How do I make an hover panes?
A sort of alternative tab concept with hoverable frames.. What is a hover panes? How do you make a hover panes? This script and codes were developed by Tcmulder on 05 August 2022, Friday.
Hover Panes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Panes</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="javascript:void(0);" class="wrap"> <article class="page page-1"> <div class="page-inner"> <h1>Page 1</h1> <p>Praesent massa est, interdum non porttitor at, bibendum eu nisl. Maecenas ut feugiat turpis, a consectetur ligula.</p> <p>Donec quis est pretium, scelerisque velit vitae, ultricies erat. Curabitur tempor massa ut libero mattis, non blandit tortor luctus. Nullam convallis volutpat nisi, in fringilla diam aliquet vitae.</p> <p>Ut placerat ligula ac orci egestas luctus. Praesent sed adipiscing lacus, non tincidunt ligula. Morbi orci diam, vehicula sed condimentum sit amet, mattis eu mauris. Sed pulvinar rhoncus est, et sollicitudin odio varius sit amet.</p> </div> </article> <article class="page page-2"> <div class="page-inner"> <h1>Page 2</h1> <p>Donec quis est pretium, scelerisque velit vitae, ultricies erat. Curabitur tempor massa ut libero mattis, non blandit tortor luctus. Nullam convallis volutpat nisi, in fringilla diam aliquet vitae. Ut placerat ligula ac orci egestas luctus.</p> <p>Praesent sed adipiscing lacus, non tincidunt ligula. Morbi orci diam, vehicula sed condimentum sit amet, mattis eu mauris. Sed pulvinar rhoncus est, et sollicitudin odio varius sit amet.</p> </div> </article> <article class="page page-3"> <div class="page-inner"> <h1>Page 3</h1> <p>Nullam convallis volutpat nisi, in fringilla diam aliquet vitae. Ut placerat ligula ac orci egestas luctus. Praesent sed adipiscing lacus, non tincidunt ligula.</p> <p>Vehicula sed condimentum sit amet, mattis eu mauris. Sed pulvinar rhoncus est, et sollicitudin odio varius sit amet.</p> <p>Morbi orci diam, vehicula sed condimentum sit amet, mattis eu mauris. Sed pulvinar rhoncus est, et sollicitudin odio varius sit amet.</p> </div> </article> <article class="page page-4"> <div class="page-inner"> <h1>Page 4</h1> <p>Interdum non porttitor at, bibendum eu nisl. Maecenas ut feugiat turpis, a consectetur ligula. Donec quis est pretium, scelerisque velit vitae, ultricies erat.</p> <p>Curabitur tempor massa ut libero mattis, non blandit tortor luctus. Nullam convallis volutpat nisi, in fringilla diam aliquet vitae. Ut placerat ligula ac orci egestas luctus. Praesent sed adipiscing lacus, non tincidunt ligula. Morbi orci diam, vehicula sed condimentum sit amet, mattis eu mauris. Sed pulvinar rhoncus est, et sollicitudin odio varius sit amet.</p> </div> </article>
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hover Panes - Script Codes CSS Codes
/*----------------------*\ :: The Magic
\*----------------------*/
.page { width: 25%;
}
.wrap:hover .page:not(:hover) { width: 8.33333%;
}
.wrap:hover .page:hover { width: 75%;
}
.wrap:hover .page:hover ~ .page:last-of-type { width: 8.33333%;
}
.wrap:hover .page:last-of-type[class] { width: 75%;
}
/*----------------------*\ :: Everything Else
\*----------------------*/
*, *:before, *:after { box-sizing: border-box;
}
html, body { height: 100%; background-color: #182024;
}
.wrap { display: block; width: 100%; height: 100%; max-width: 75em; min-width: 20em; margin: 0 auto; color: #fbfbcd; font-family: "Trebuchet MS", sans-serif; line-height: 1.5; letter-spacing: .05em; cursor: default;
}
.wrap h1 { border-bottom: 5px solid #6d9f94;
}
.page { position: relative; overflow-y: auto; overflow-x: hidden; float: left; z-index: 100; height: 100%; padding: 1em; background-color: #214050; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.3); text-align: center; transition-duration: 300ms; transition-property: width, background-color, color;
}
.page:hover { background-color: #1c4d61;
}
.wrap:hover .page:not(:hover) { color: #cac29c; background-color: #19313d;
}
.page-inner { display: inline-block; width: 20em; text-align: left;
}
Hover Panes - Script Codes JS Codes
// nothing to see here
Developer | Tcmulder |
Username | tcmulder |
Uploaded | August 05, 2022 |
Rating | 3 |
Size | 3,512 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flexslider Enhanced | 5,423 Kb |
Divs with Aspect Ratio | 2,803 Kb |
Percentage Animation | 2,648 Kb |
CSS-Only Slideshow | 3,308 Kb |
Nav Back There | 3,646 Kb |
Toggle-to-Menu Concept | 3,255 Kb |
Stickup Sticky Nav jQuery Plugin | 4,613 Kb |
Half and Half | 3,970 Kb |
Zenman Intro Loader | 7,677 Kb |
Longboard CTAs | 4,850 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Em Test | Rodesco | 1,784 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!