Hover-effect
How do I make an hover-effect?
What is a hover-effect? How do you make a hover-effect? This script and codes were developed by Susanne Karin Lundblad on 13 September 2022, Tuesday.
Hover-effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover-effect</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://weloveiconfonts.com/api/?family=maki);
html, body { background-color: #ecf0f1; margin: 20px auto; display: block; max-width: 600px; height: 100%; text-align: center;
}
h3, a, p, span, *:before,h1 { font-family: "Helvetica Neue", sans-serif; font-weight: 300; text-decoration: none;
}
/* maki */
[class*="maki-"]:before { font-family: 'maki', sans-serif;
}
.frame { background-color: white; border: 1px solid #2c3f52; text-align: center; padding: 40px 30px 60px;
}
.maki-giraffe:before { font-size: 100px; color: #3498db;
}
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center;
}
.grid li { display: inline-block; width: 300px; margin: 0; padding: 0px; text-align: left; position: relative;
}
.grid figure { margin: 0; position: relative;
}
.grid figure img { width: 100%; display: block; position: relative; height: 100%;
}
.grid figcaption { position: absolute; top: 0; left: 0; background: #2c3f52; color: #ed4e6e;
}
.grid figcaption h3 { margin: 0; padding: 20px 0 0 20px; color: #fff;
}
.grid figcaption span:before { content: 'by '; padding-left: 20px;
}
.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; position: absolute; bottom: 20px; right: 20px; background: #ed4e6e; color: #fff;
}
.cs-style-4 li { perspective: 1700px; perspective-origin: 0 50%;
}
.cs-style-4 figure { transform-style: preserve-3d;
}
.cs-style-4 figure img { transition: transform 0.4s;
}
.cs-style-4 figure:hover img { transform: translateX(25%);
}
.cs-style-4 figcaption { height: 100%; width: 70%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s;
}
.cs-style-4 figure:hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s;
}
@media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 100px 10px; } .grid li { width: 100%; min-width: 300px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="grid cs-style-4"> <li> <figure> <div class="frame"> <span class="maki-giraffe"></span> </div> <figcaption> <h3>Giraffe</h3> <span>Susanne Karin</span> <a href="http://wobee.no">Take a look</a> </figcaption> </figure> </li> <li> <figure> <!-- ... --> </figure> </li> <!-- ... -->
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Hover-effect - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=maki);
html, body { background-color: #ecf0f1; margin: 20px auto; display: block; max-width: 600px; height: 100%; text-align: center;
}
h3, a, p, span, *:before,h1 { font-family: "Helvetica Neue", sans-serif; font-weight: 300; text-decoration: none;
}
/* maki */
[class*="maki-"]:before { font-family: 'maki', sans-serif;
}
.frame { background-color: white; border: 1px solid #2c3f52; text-align: center; padding: 40px 30px 60px;
}
.maki-giraffe:before { font-size: 100px; color: #3498db;
}
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; margin: 0 auto; list-style: none; text-align: center;
}
.grid li { display: inline-block; width: 300px; margin: 0; padding: 0px; text-align: left; position: relative;
}
.grid figure { margin: 0; position: relative;
}
.grid figure img { width: 100%; display: block; position: relative; height: 100%;
}
.grid figcaption { position: absolute; top: 0; left: 0; background: #2c3f52; color: #ed4e6e;
}
.grid figcaption h3 { margin: 0; padding: 20px 0 0 20px; color: #fff;
}
.grid figcaption span:before { content: 'by '; padding-left: 20px;
}
.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; position: absolute; bottom: 20px; right: 20px; background: #ed4e6e; color: #fff;
}
.cs-style-4 li { perspective: 1700px; perspective-origin: 0 50%;
}
.cs-style-4 figure { transform-style: preserve-3d;
}
.cs-style-4 figure img { transition: transform 0.4s;
}
.cs-style-4 figure:hover img { transform: translateX(25%);
}
.cs-style-4 figcaption { height: 100%; width: 70%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s;
}
.cs-style-4 figure:hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s;
}
@media screen and (max-width: 31.5em) { .grid { padding: 10px 10px 100px 10px; } .grid li { width: 100%; min-width: 300px; }
}
Developer | Susanne Karin Lundblad |
Username | SusanneLundblad |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 3,241 Kb |
Views | 30,360 |
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 |
Css grid | 2,250 Kb |
Wake animation | 4,322 Kb |
Blend mode of text | 2,269 Kb |
Floating element with shadow | 1,783 Kb |
Css man | 3,712 Kb |
AngularJS, submitting from input pushing enter | 2,219 Kb |
Flying pinata | 3,560 Kb |
Susie | 2,797 Kb |
AngularJS, showing and hiding content using radio buttons | 2,032 Kb |
A Pen by Susanne Karin Lundblad | 2,320 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 |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Ghost | Mghayour | 11,738 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
To Do List with Delete | Mattlbrody | 2,068 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!