Design an Expanding Image Gallery Template using HTML and CSS

Last Updated : 20 Dec, 2023

In this article, we design an expanding image gallery template using HTML and CSS. An Expanding Image Gallery provides an interactive user experience compared to static galleries. The image expands when the user hovers over the image, enhancing user experience. This template allows for an intuitive expansion of images, enhancing user experience in a stylish presentation.

Preview

Preview

Approach

Create the basic structure of the web page using different elements including div and paragraph elements.
Link the external stylesheet to the HTML file. Here id1, id2, and id3 defines the different background image with urls.
The attribute class named img_div contains various properties including height, width, border radius,
The property transition is used to give a smooth expanding effect. the image selector is used to give the property height, width, border-radius, and opacity.

Example: The below example illustrates the Image Gallery template using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Expanding Image 
    </title> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <div class="box1"> 
        <p class="gfg">GeeksforGeeks</p> 
        <div class="img_box"> 
            <div class="img_div" id="div1"></div> 
            <div class="img_div" id="div2"></div> 
            <div class="img_div" id="div3"></div> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
.img_div { 
    height: 100px; 
    width: 500px; 
    border-radius: 40px; 
    transition: 0.5s ease-in-out; 
    border: 5px solid rgb(243, 235, 235); 
    background-repeat: repeat; 
    background-size: contain; 
} 
  
#div1 { 
    background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20231017114110/WEB-DESIGN-copy.webp"); 
} 
  
#div2 { 
    background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20231009173643/Best-UIUX-Practices-copy.webp"); 
} 
  
#div3 { 
    background-image: url( 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230318230239/Python-Data-Science-Tutorial.jpg"); 
} 
  
img { 
    height: 100px; 
    width: 500px; 
    border-radius: 40px; 
    opacity: 0.7; 
} 
  
.img_div:hover { 
    height: 300px; 
    width: 700px; 
    opacity: 0.9; 
    border: 6px solid rgb(176, 176, 189); 
    cursor: pointer; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
  
.img_box { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 98vh; 
    flex-direction: column; 
    flex-wrap: wrap; 
    gap: 30px; 
    margin-top: -200px; 
} 
  
.title-a { 
    font-size: 30px; 
    text-align: center; 
} 
  
.gfg { 
    color: green; 
    font-weight: 700; 
    font-size: 60px; 
} 
  
body { 
    background-color: rgb(229, 215, 241); 
} 
  
.box1 { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    flex-direction: column; 
}