Image gallery
How do I make an image gallery?
Image gallery hover effect, using clip-path.. What is a image gallery? How do you make a image gallery? This script and codes were developed by Tim Normington on 05 December 2022, Monday.
Image gallery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="img-container"> <img src="http://www.unsplash.it/200?random" class="img"> <span class="desc"> Some info about the image </span> </div> <div class="img-container"> <img src="http://www.unsplash.it/200?random" class="img"> <span class="desc"> Some info about the image </span> </div> <div class="img-container"> <img src="http://www.unsplash.it/200?random" class="img"> <span class="desc"> Some info about the image </span> </div> <div class="img-container"> <img src="http://www.unsplash.it/200?random" class="img"> <span class="desc"> Some info about the image </span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Image gallery - Script Codes CSS Codes
body { background-color: #ededed;
}
.img-container { display: inline-block; position: relative;
}
.img-container .img { -webkit-filter: grayscale(1) blur(2px); -webkit-clip-path: circle(40% at 50% 50%); transition: .3s all ease-out;
}
.img-container .img:hover { -webkit-filter: grayscale(0); -webkit-clip-path: circle(50% at 50% 50%);
}
.img-container .desc { pointer-events: none; position: absolute; width: 100%; display: block; text-align: center; bottom: 45%; color: white; background-color: rgba(0, 0, 0, 0.25); line-height: 2; opacity: 0; transition: .3s opacity ease-out;
}
Image gallery - Script Codes JS Codes
$(document).ready(function() { var img = $('.img'); img.on("mouseenter", function() { $(this).siblings('.desc').css('opacity', 1); }); img.on('mouseleave', function() { $(this).siblings('.desc').css('opacity', 0); });
});
Developer | Tim Normington |
Username | tnormington |
Uploaded | December 05, 2022 |
Rating | 3 |
Size | 2,434 Kb |
Views | 14,168 |
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 |
Twitch Notification Concept | 2,589 Kb |
SVG Coffee Animation | 4,174 Kb |
Online Banking Interface | 2,919 Kb |
Mobile Dropdown Top Nav | 3,183 Kb |
Footer Link Navigation | 2,196 Kb |
Social Media Sidebar | 2,884 Kb |
Loading Animation | 1,737 Kb |
A Pen by Tim Normington | 1,949 Kb |
Diagonal Mega Menu | 5,288 Kb |
Mobile Drop Down | 4,856 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 |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
GrcJS | Vino6 | 2,047 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Flexbox slider | Rendro | 3,459 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 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!