Image with hover CSS3 effect and full overlay
How do I make an image with hover css3 effect and full overlay?
Just a pic with nice CSS3 filter and transform effects on hover, and full overlay for description.. What is a image with hover css3 effect and full overlay? How do you make a image with hover css3 effect and full overlay? This script and codes were developed by Twikito on 11 September 2022, Sunday.
Image with hover CSS3 effect and full overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image with hover CSS3 effect and full 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; margin:0; padding:15px; box-sizing:border-box; height:100%; top:100%; left:0; right:0; background-color:rgba(0,0,0,0.6); color:#fff; font-family:arial; transition:all 0.2s ease-in-out;
}
figure img { transition:all 0.2s ease-in-out; }
figure:hover img { -webkit-filter: blur(1px) contrast(3) grayscale(1); transform: scale(1.1) rotate(2deg);
}
figure:hover figcaption { top:0; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }
figure { margin:20px auto; box-shadow:0 5px 20px #aaa; }
figcaption { font:0.9em/251px arial; text-shadow:0 1px 1px #000; text-align:center; 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 full overlay - Script Codes CSS Codes
figure { position:relative; overflow:hidden; width:500px; height:281px;
}
figcaption { position:absolute; margin:0; padding:15px; box-sizing:border-box; height:100%; top:100%; left:0; right:0; background-color:rgba(0,0,0,0.6); color:#fff; font-family:arial; transition:all 0.2s ease-in-out;
}
figure img { transition:all 0.2s ease-in-out; }
figure:hover img { -webkit-filter: blur(1px) contrast(3) grayscale(1); transform: scale(1.1) rotate(2deg);
}
figure:hover figcaption { top:0; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }
figure { margin:20px auto; box-shadow:0 5px 20px #aaa; }
figcaption { font:0.9em/251px arial; text-shadow:0 1px 1px #000; text-align:center; 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 full overlay - Script Codes JS Codes
// NO JS
Developer | Twikito |
Username | Twikito |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 2,724 Kb |
Views | 22,264 |
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 |
Realistics radio buttons with only css | 3,376 Kb |
CSS3 trendy retro photo effect | 2,637 Kb |
LavaLamp effect with CSS | 2,720 Kb |
UI with UX improvements with only CSS | 5,668 Kb |
Easy and Bulletproof ScrollTo Script | 4,111 Kb |
Tooltip with pseudo-element | 2,763 Kb |
Beautiful Textual Map of France with CSS | 5,035 Kb |
Full page table inside the grid | 1,864 Kb |
Beautiful Textual Map of French towns with CSS | 6,387 Kb |
Item menu effect with pseudo-element | 2,602 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 |
Knob rotation | Alemesre | 2,122 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Exploring css spinners | Akagr | 3,569 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Simple Buttons | Haydenmills | 1,750 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!