Category Hover Demo
How do I make an category hover demo?
Simple demo showing a hover effect I built this week.. What is a category hover demo? How do you make a category hover demo? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.
Category Hover Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Category Hover Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="modal"> <div class="card archipelago"> <a class="card-category" href="#" title="HTML & CSS"> <span>Archipelago</span> </a> </div> <div class="card butte"> <a class="card-category" href="#" title="HTML & CSS"> <span>Butte</span> </a> </div> <div class="card canyon"> <a class="card-category" href="#" title="HTML & CSS"> <span>Canyon</span> </a> </div> <div class="card dune"> <a class="card-category" href="#" title="HTML & CSS"> <span>Dune</span> </a> </div> <div class="card estuary"> <a class="card-category" href="#" title="HTML & CSS"> <span>Estuary</span> </a> </div>
</div>
</body>
</html>
Category Hover Demo - Script Codes CSS Codes
.archipelago .card-category { background-color: mediumseagreen; color: mediumseagreen;
}
.butte .card-category { background-color: brown; color: brown;
}
.canyon .card-category { background-color: burlywood; color: burlywood;
}
.dune .card-category { background-color: lightcoral; color: lightcoral;
}
.estuary .card-category { background-color: darkslateblue; color: darkslateblue;
}
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
.modal { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}
.card { width: 20em; max-width: 90%; padding: 1.5em 0; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE;
}
.card-category { background-image: -webkit-linear-gradient(transparent 0, transparent 0.5em, #FFFFFF 0.5em, #FFFFFF 100%); background-image: linear-gradient(transparent 0, transparent 0.5em, #FFFFFF 0.5em, #FFFFFF 100%); background-repeat: no-repeat; width: 100%; height: 2.875em; display: block; border-bottom: 0 !important; position: relative; text-decoration: none; -webkit-transition: background .15s, color .15s; transition: background .15s, color .15s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.card-category:hover, .card-category:focus, .card-category:active { background-position: top 3em left; color: #FFFFFF !important;
}
.card-category span { display: block; margin-top: -0.35em; padding-bottom: .35em; border-bottom: 1px solid #999999; position: absolute; top: 50%; left: 1em; right: 1em; overflow: hidden; font-family: "Open Sans"; text-transform: uppercase; -webkit-transition: border-bottom-color 0 linear .15s, margin .15s ease; transition: border-bottom-color 0 linear .15s, margin .15s ease;
}
.card-category span:after { content: "\F0DA"; opacity: 0; color: #FFFFFF; display: block; margin-top: -0.75em; position: absolute; top: 50%; right: 100%; font-family: "FontAwesome"; font-weight: bold; -webkit-transition: opacity .1s ease, right 0 linear .15s; transition: opacity .1s ease, right 0 linear .15s;
}
.card-category:hover span, .card-category:focus span, .card-category:active span { border-bottom-color: transparent; margin-top: -0.714em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition: margin .15s ease; transition: margin .15s ease;
}
.card-category:hover span:after, .card-category:focus span:after, .card-category:active span:after { opacity: 1; right: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition: opacity .1s ease .05s, right .15s; transition: opacity .1s ease .05s, right .15s;
}
Developer | Chris Burnell |
Username | chrisburnell |
Uploaded | September 16, 2022 |
Rating | 4 |
Size | 3,469 Kb |
Views | 28,336 |
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 CSS Checkbox | 3,244 Kb |
The power of transform for centering | 3,747 Kb |
Globule Bleu Jobs Page Anchor Rollover Effect | 2,533 Kb |
Psychedelic Slice | 2,681 Kb |
Slip-n-slide Modal | 3,316 Kb |
Modal Container without JS | 3,272 Kb |
Flyknife Comics | 2,934 Kb |
Message Types | 2,987 Kb |
Infinite Square | 2,937 Kb |
Interesting Hover Animation | 2,686 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 |
BlueBox Fork | Huskynation | 12,675 Kb |
Weather App | Kw7oe | 3,162 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Form Labels | Bartuc | 2,717 Kb |
Under construction | GhostRider | 1,642 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Hovers with popups | Zacharyolson | 2,380 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!