Threadless-style rollover menu
How do I make an threadless-style rollover menu?
Because I like menus. And CSS. And Threadless.. What is a threadless-style rollover menu? How do you make a threadless-style rollover menu? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.
Threadless-style rollover menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Threadless-style rollover menu</title> <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> <body>
<div class="container"> <div class="image"> <span class="image-caption transition">Camera</span> <span class="image-menu transition"> <h2>Camera</h2> <ul> <li><a href="#">Bodies</a></li> <li><a href="#">Lenses</a></li> <li><a href="#">Film</a></li> <li><a href="#">Cases</a></li> <li><a href="#">Accessories</a></li> </ul> </span> <img src="http://leicarumors.com/wp-content/uploads/2013/07/Leica-X2-yellow.jpg" /> </div>
</div>
</body>
</body>
</html>
Threadless-style rollover menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
img { display: block;
}
a { text-decoration: none; color: rgb(255, 255, 255); -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;
}
a:hover { color: rgb(255, 217, 0); padding-left: 5px;
}
body { background-color: rgb(255, 217, 0);
}
.container { display: table; margin: 50px auto auto auto; overflow: hidden; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
}
.container:hover .image-caption { bottom: -8px; opacity: 0;
}
.container:hover .image-menu { /*transform: translate(0px, 432px); /*-webkit-transform: translate(0px, 432px); -moz-transform: translate(0px, 432px); -o-transform: translate(0px, 432px); -ms-transform: translate(0px, 432px);*/ top: 0;
}
.image { position: relative;
}
.image-caption { position: absolute; bottom: 6px; left: 10px; color: rgb(0, 178, 208); font-family: 'Fredoka One', cursive; font-size: 30px; text-transform: uppercase;
}
.image-menu { position: absolute; top: -432px; left: 0; height: 100%; width: 100%; background-color: rgb(0, 178, 208); font-family: 'Fredoka One', cursive; padding: 20px;
}
.image-menu h2 { margin: 0; color: rgb(255, 217, 0); font-size: 36px; line-height: 40px; text-transform: uppercase;
}
.image-menu ul { list-style-type: none; padding: 0;
}
.image-menu li { font-size: 22px;
}
.transition { -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; -webkit-backface-visibility: hidden;
}
Developer | Mitch Pruitt |
Username | mitchdot |
Uploaded | November 08, 2022 |
Rating | 4.5 |
Size | 2,195 Kb |
Views | 18,216 |
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 |
Simple responsive drop-down menu | 2,178 Kb |
ASCII triangle image overlay | 2,200 Kb |
Off-screen navigation | 5,220 Kb |
Flexbox-based responsive menu | 3,589 Kb |
A Pen by Mitch Pruitt | 2,416 Kb |
ThisIsMyJam Player | 5,945 Kb |
Animated camera focus ring | 3,305 Kb |
Segmented control | 3,759 Kb |
Zoomy image rollover | 2,764 Kb |
Sample project gallery | 2,987 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 |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 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!