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 |
Image header overlay | 2,188 Kb |
ASCII triangle image overlay | 2,200 Kb |
Sample project gallery | 2,987 Kb |
Underlined form fields | 2,323 Kb |
A Pen by Mitch Pruitt | 2,416 Kb |
Flexbox-based responsive menu | 3,589 Kb |
Flexbox quote box | 3,441 Kb |
Sooper cool article header image | 3,583 Kb |
Image caption overlay | 2,107 Kb |
Snazzy fixed backgrounds | 4,927 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 |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Single element checkbox | Ivijaygupta | 1,996 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 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!