Image with hover CSS3 effect and bottom overlay
How do I make an image with hover css3 effect and bottom overlay?
Just another pic with nice CSS3 filter and transform effects on hover, and bottom overlay for description.. What is a image with hover css3 effect and bottom overlay? How do you make a image with hover css3 effect and bottom overlay? This script and codes were developed by Twikito on 11 September 2022, Sunday.
Image with hover CSS3 effect and bottom overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image with hover CSS3 effect and bottom overlay</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! */ figure { position:relative; overflow:hidden; width:500px; height:281px;
}
figcaption { position:absolute; left:0; right:0; bottom:-20%; margin:0; padding:10px 15px; background-color:rgba(0,0,0,0.7); color:#fff; transition:all 0.2s ease-in-out;
}
figure img { transition:all 0.2s ease-in-out;
}
figure:hover img { -webkit-filter: blur(1px); transform: scale(1.1) rotate(2deg);
}
figure:hover figcaption { bottom: 0; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }
figure { margin:20px auto; box-shadow:0 5px 20px #aaa; }
figcaption { font:0.9em/1.5em arial; text-shadow:0 1px 1px #000; z-index:2; }
figure:after {content:""; position:absolute; left:0;right:0;bottom:0;top:0;box-shadow:0 0 25px rgba(0,0,0,0.95) inset;z-index:1; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <figure> <img src="https://24.media.tumblr.com/tumblr_mblly2EQll1qlyhdyo1_500.jpg" alt="" width="500" height="281"> <figcaption>Designer avec class, c'est trop stylé !</figcaption>
</figure>
<!-- Another Pen? codepen.io/Twikito --> <script src="js/index.js"></script>
</body>
</html>
Image with hover CSS3 effect and bottom overlay - Script Codes CSS Codes
figure { position:relative; overflow:hidden; width:500px; height:281px;
}
figcaption { position:absolute; left:0; right:0; bottom:-20%; margin:0; padding:10px 15px; background-color:rgba(0,0,0,0.7); color:#fff; transition:all 0.2s ease-in-out;
}
figure img { transition:all 0.2s ease-in-out;
}
figure:hover img { -webkit-filter: blur(1px); transform: scale(1.1) rotate(2deg);
}
figure:hover figcaption { bottom: 0; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }
figure { margin:20px auto; box-shadow:0 5px 20px #aaa; }
figcaption { font:0.9em/1.5em arial; text-shadow:0 1px 1px #000; z-index:2; }
figure:after {content:""; position:absolute; left:0;right:0;bottom:0;top:0;box-shadow:0 0 25px rgba(0,0,0,0.95) inset;z-index:1; }
Image with hover CSS3 effect and bottom overlay - Script Codes JS Codes
// NO JS
Developer | Twikito |
Username | Twikito |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 2,630 Kb |
Views | 38,456 |
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 |
Full page table inside the grid | 1,864 Kb |
Flexible Google-style loader with CSS | 2,473 Kb |
Image with hover CSS3 effect and full overlay | 2,724 Kb |
CSS3 Box Shadows Effects | 2,193 Kb |
Beautiful Textual Map of France with CSS | 5,035 Kb |
Breadcrum for shopping path with only css | 2,793 Kb |
UI with UX improvements with only CSS | 5,668 Kb |
Pure CSS Slider | 4,664 Kb |
Picture hover effect with pseudo-elements | 2,749 Kb |
Beautiful Textual Map of the USA with CSS | 7,816 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 |
3d css cube | Semenchenko | 4,578 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Arrow Navigation | Hinducows | 1,973 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!