Image gallery is a powerful tool that can keep visitors engaged on any website and create an attractive website layout. With this image gallery, a company can present its products, services, or any other content to its audience in an organized and attractive manner. Today we will create a responsive CSS flexbox image gallery where some images will be presented vertically side by side. If we hover over an image, it will expand with a smooth transition. Once the hover is gone, it will return to its previous state. The coding process for this snippet is shown in the video tutorial below.
Hope the video tutorial gave you an idea of what the snippet will look like. Images are a powerful element on any website. A natural tendency of visitors is that they prefer images more than written content. So if the image can be presented to the visitor visually and organized, then the user experience of that website is enhanced. If the image of your product can be displayed attractively through the gallery, then in many cases the product description is not even necessary. If you visit any e-commerce website, you will see how well they present their product images to the visitors.
You May Also Like:
Bootstrap 5 Landing Page Website Design
Bootstrap 5 Testimonial with Flip Animation
Bootstrap 5 Footer Design
In this CSS Image Gallery Snippet, all the images are styled to remain organized in a grid or row and evenly spaced. When the users hover over an image in this gallery, the image will enlarge and we can watch it in detail. To make the hover effect smooth we used a cubic bezier CSS transition which you can see in the video above. The initial container width is 600 pixels. But for small devices, its width is set to 100% so that the CSS image gallery takes the full width of the device.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
<meta charset="UTF-8">
<title>How to create Simple Flexbox Responsive Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card" style="background-image: url(img/1.jpg)"></div>
<div class="card" style="background-image: url(img/2.jpg)"></div>
<div class="card" style="background-image: url(img/3.jpeg)"></div>
<div class="card" style="background-image: url(img/3.jpg)"></div>
<div class="card" style="background-image: url(img/4.jpg)"></div>
</div>
</body>
</html>
CSS Code:
body{
background: #f5f5f5;
}
.container{
width: 600px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
height: 50vh;
margin: 12% auto 0;
}
.card {
flex: 1;
border-radius: 100px;
margin: 0;
padding: 0;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
transition: all 500ms cubic-bezier(.14,.69,.93,1);
box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.card:hover{
flex-basis: 35vw;
}
@media only screen and (min-width: 768px) and (max-width: 991px){
.container{
width: 100%;
}
}
@media only screen and (max-width: 767px){
.container{
width: 100%;
}
}
Top comments (0)