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 | 2,797 Kb |
New Brandings | 5,617 Kb |
Clock Face Idea | 3,196 Kb |
Stupid RTL Demo | 3,075 Kb |
Interaction Jazz | 11,103 Kb |
Modal Container without JS | 3,272 Kb |
Zoomy Anchor Thing | 2,680 Kb |
Infinite Square | 2,937 Kb |
The Importance of Proper Navigational CSS | 3,165 Kb |
The power of transform for centering - INTERACTIVE | 2,439 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 |
Perforated foil | 0x04 | 2,617 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 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!