Pure CSS Photo Gallery Layout

Last Updated : 10 Mar, 2023

To create a Pure CSS Gallery Layout, we can use a grid system. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such a grid system.

Example 1: In this example, the gallery container is set to display as a grid with columns that have a minimum size of 200px and a maximum of 1fr (the available space). The CSS gap property creates a space between the images.

Each gallery item (image container) has a position of relative and an overflow of hidden to hide any parts of the image that exceed the container size. The image itself has a width and height of 100% to fill the container and the object-fit property set to cover to crop the image.

The hover effect scales the image to 1.2 times its original size when hovered over, and an overlay appears with a semi-transparent black background color. The overlay text is centered vertically and horizontally using the transform property.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Disable Submit Button</title> 
    <style> 
        .gallery-container { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 1rem; 
        } 
        img { 
            width: 150px; 
            height: 150px; 
        } 
        .gallery-item { 
            position: relative; 
            overflow: hidden; 
        } 
  
        .gallery-item img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.5s ease; 
        } 
  
        .gallery-item:hover img { 
            transform: scale(1.2); 
        } 
  
        .gallery-item .overlay { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background-color: rgba(0, 0, 0, 0.5); 
            opacity: 0; 
            transition: opacity 0.5s ease; 
        } 
  
       .gallery-item:hover .overlay { 
             opacity: 1; 
        } 
  
       .gallery-item .overlay-text { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: #fff; 
            font-size: 1.5rem; 
        } 
        h1, 
        h3 { 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Pure CSS Photo Gallery Layout</h3> 
    <div class="gallery-container"> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
              alt="Photo 1"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 1</div> 
            </div> 
        </div> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="Photo 2"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 2</div> 
            </div> 
        </div> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="Photo 3"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 3</div> 
            </div> 
        </div> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="Photo 4"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 4</div> 
            </div> 
        </div> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="Photo 5"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 5</div> 
            </div> 
        </div> 
        <div class="gallery-item"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="Photo 6"
            /> 
            <div class="overlay"> 
                <div class="overlay-text">Photo 6</div> 
            </div> 
        </div> 
      <!-- Add more gallery items as needed -->
    </div> 
</body> 
</html> 

Output:

Include the Grid System: The grid system is not included as a part of pure.css as the media queries cannot be overwritten so we have to put these three CSS files to implement the grid system. The link to the files is given below. For the latest version, you can head over to the official website of Pure.CSS grids.

<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/base-min.css”>
<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/grids-min.css”>
<link rel=”stylesheet” href=”https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css”>

Example 2: We have created this example using the Pure CSS grid system and is the same as the previous example.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Pure.CSS | Grids</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/purecss@2.0.6/build/base-min.css"/> 
    <link rel="stylesheet" href= 
"https://unpkg.com/purecss@2.0.6/build/grids-min.css"/> 
    <link rel="stylesheet" href= 
"https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css"/> 
    <style> 
        h1,h3 { 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>Pure CSS Photo Gallery Layout</h3> 
    <div class="pure-g"> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="img"/> 
        </div> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="img"/> 
        </div> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="img"/> 
        </div> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
               alt="img"/> 
        </div> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
               alt="img"/> 
        </div> 
        <div class="pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1-6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230301100302/geeksforgeeks.png"
                alt="img"/> 
        </div> 
    </div> 
</body> 
    
</html>