Creating a visually appealing and interactive image gallery can significantly enhance the user experience on any website.
In this blog post, we will walk through a simple yet effective method to create an expanding image gallery using just HTML and CSS. This gallery will dynamically expand the selected image while keeping the others in a minimized state. Let’s dive into the code!
HTML Structure
The HTML structure is straightforward and clean. We have a main container <div> that holds multiple child <div> elements, each containing an image.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Expanding Image Gallery</title> <link rel="stylesheet" href="style.css"></head><body> <div class="images"> <div class="image"><img src="/image/img1.jpg" alt=""></div> <div class="image"><img src="/image/img2.jpg" alt=""></div> <div class="image"><img src="/image/img3.jpg" alt=""></div> <div class="image"><img src="/image/img4.jpg" alt=""></div> <div class="image"><img src="/image/img5.jpg" alt=""></div> </div></body></html>
CSS Styling
CSS is utilized to style our HTML and create the expanding effect on hover. Let’s break down the provided CSS:
*{ margin: 0; padding: 0;}
body{ background-color: white; display: grid; place-items: center; height: 100vh;}
.images{ display: flex; overflow: hidden; width: 70%; height: 70vh; border-radius: 20px;}
.image{ width: 0; height: 100%; transition: flex 0.8s ease-in-out; flex: 1;}
.image img{ height: 100%; object-fit: contain; border-radius: 20px;}
.image:hover{ flex: 8;}
Note:- Image is Provided on our Telegram Channel.
Explanation:
- The
*selector resets the default margin and padding of all HTML elements to zero, providing a clean slate to work on. - The
bodyis styled to center its content and fill the entire viewport height. .imagesis the container that holds all image divs and is styled as a flexbox to align its children (image divs) in a row..imageis styled to smoothly transition its flex property, which will change on hover, creating the expanding effect..image imgensures that the images are displayed properly within their respective divs, maintaining their aspect ratio and applying a border-radius..image:hoverincreases the flex property of the hovered image div, making it expand while minimizing others.
Conclusion
With just a few lines of HTML and CSS, we've created a dynamic, expanding image gallery that enhances the visual appeal of a webpage. This simple yet effective technique can be implemented in various projects, such as portfolios, e-commerce sites, or any platform that benefits from an interactive image display.
Feel free to customize the code according to your design preferences and project requirements.