Zoom background cover image on hover
How do I make an zoom background cover image on hover?
What is a zoom background cover image on hover? How do you make a zoom background cover image on hover? This script and codes were developed by Kevin Weber on 20 November 2022, Sunday.
Zoom background cover image on hover - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zoom background cover image on hover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image" role="img" aria-label="Image description"> <span class="inner" style="background-image:url(http://lorempixel.com/400/250)"></span>
</div>
</body>
</html>
Zoom background cover image on hover - Script Codes CSS Codes
.image { display: block; height: 150px; width: 300px; overflow: hidden;
}
.image .inner { background-size: cover; display: block; height: 100%; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s;
}
.image:hover .inner { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05);
}
Developer | Kevin Weber |
Username | kevinweber |
Uploaded | November 20, 2022 |
Rating | 3 |
Size | 1,874 Kb |
Views | 18,216 |
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-only link confirm dialog | 2,601 Kb |
CSS triangles | 1,472 Kb |
Logo icon and text animation | 2,418 Kb |
Animated Video Play Button by Adobe | 2,668 Kb |
CSS Loading Animation Circle | 2,103 Kb |
Slack Icon Letter Generator | 1,946 Kb |
Auto-generated mesh with triangles | 3,307 Kb |
Mark text on hover | 1,678 Kb |
Fill circle from bottom to top in percent | 2,760 Kb |
Change link color from left to right | 1,977 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 |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Popover Example | Seanboom | 2,429 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Cars going | Netoguimaraes | 1,699 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
APortfolio | Skybutterfly | 5,174 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!