can anyone drop for code to create Image Gallery Using HTML And CSS. I wanna try it on notepad so guide me to do in notepad. How can i create Image Gallery With HTML And CSS Code.
Image Gallery With Animations Using HTML And CSS Code
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people's questions, and connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
can anyone drop for code to create Image Gallery Using HTML And CSS. I wanna try it on notepad so guide me to do in notepad. How can i create Image Gallery With HTML And CSS Code.
Aniya
Try the following html and css code in notepad to create image gallery with smooth animations using HTML and CSS.
First take a notepad and save it as image_gallery.html
and copy paste the below code and replace img src with your image on your computer.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image Gallery</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Own Image Gallery</h1>
<div class=”gallery”>
<img src=”man1.jpg” alt=”Image 1″>
<img src=”girl1.jpg” alt=”Image 2″>
<img src=”insta.jpg” alt=”Image 3″>
<img src=”nature_bg.jpg” alt=”Image 2″>
<img src=”nature2.jpg” alt=”Image 3″>
</div>
<div class=”gallery”>
<img src=”fb.png” alt=”Image 1″>
<img src=”nature_bg.jpg” alt=”Image 2″>
<img src=”nature1.jpg” alt=”Image 3″>
<img src=”girl2.jpg” alt=”Image 2″>
<img src=”nature_bg.jpg” alt=”Image 3″>
</div>
<div class=”image-container”>
<img src=”girl2.jpg” alt=”Image description”>
<img src=”man1.jpg” alt=”Image description”>
<img src=”nature_bg.jpg” alt=”Image description”>
<img src=”nature1.jpg” alt=”Image description”>
<img src=”nature2.jpg” alt=”Image description”>
</div>
</body>
</html>
Now open another notepad file and save it as Styel.css
.gallery {
width: 40%; /* Adjust the width as needed */
margin: 0 auto; /* Center the gallery horizontally */
display: flex;
flex-wrap: wrap; /* Allow images to wrap to multiple lines */
}
.gallery img {
border: 1px solid #008080;
margin: 10px; /* Add spacing between images */
width: 100px; /* Set image width */
height: 100px; /* Set image height */
object-fit: cover; /* Scale image to fit container while maintaining aspect ratio */
transition: transform 0.5s ease-in-out; /* Smooth transition for animations */
}
.gallery img:hover {
transform: rotate(360deg);
transform: scale(1.3); /* Zoom in on hover effect */
opacity: 0.8; /* Slightly reduce opacity on hover */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow on hover */
}
.image-container {
overflow: hidden; /* Prevent image overflow */
position: relative; /* Enable absolute positioning for child elements */
}
.image-container img {
margin: 5px; /* Add spacing between images */
width: 100px; /* Set image width */
height: 100px; /* Set image height */
object-fit: cover; /* Scale image to fit container while maintaining aspect ratio */
float: left; /* Float images to the left */
border: 2px solid #008080;
}
.image-container:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 100 100’%3E%3Ccircle cx=’50’ cy=’50’ r=’10’ fill=’%23fff’ opacity=’0.2’/%3E%3Ccircle cx=’20’ cy=’30’ r=’5′ fill=’%23fff’ opacity=’0.9’/%3E%3Ccircle cx=’80’ cy=’70’ r=’7′ fill=’%23fff’ opacity=’0.1’/%3E%3C/svg%3E”); /* Replace with your particle SVG */
background-repeat: repeat; /* Allow particles to repeat across the image */
opacity: 0.2; /* Hide particles initially */
transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
}
.image-container:hover:after {
opacity: 1; /* Show particles on hover */
animation: disperse 0.7s ease-in-out forwards; /* Animation for particle dispersion */
}
@keyframes disperse {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-20px, 20px); /* Adjust for desired dispersion direction */
}
}
output :