Open In App

CSS Image Gallery

Last Updated : 12 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Image Gallery is used to store and display a collection of pictures. This example creates a responsive Image Gallery using HTML and CSS.

Steps 1:

Creating a basic gallery structure

  • Each gallery contains a number of div sections.
  • Each div section contains an image and its description.
<div class="gallery">
<div class="box">
<div class="image"> Image Added Here </div>
<div class="text"> Text Added Here </div>
</div>

Steps 2:

Styling the file using CSS

  • Styling the gallery container:
    • Set the display property to flex. It means elements within the gallery container will have flex context.
    • Set the flex-flow property to row wrap. It sets the flex-direction and flex-wrap style.
    .gallery {
    width:100%;
    display:flex;
    flex-flow: row wrap;
    }
  • Styling the box:
    .box {
    flex-basis: 20%;
    width: 100%;
    padding: 10px;
    margin: 8px;

    // Set the blur shadow
    box-shadow: 1px 1px 15px 1px green;
    }

Steps 3:

Use @media query to create responsive image gallery.

@media only screen and (max-width: 300px) { 
.box {
flex-basis: 100%;
}

Example:

html
<!DOCTYPE html>
<html>

<head>
    <style>
        /* style to set body of page */
        body {
            width: 100%;
            margin: auto;
        }

        .gallery {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }

        .box {
            flex-basis: 20%;
            width: 100%;
            padding: 10px;
            margin: 8px;
            box-shadow: 1px 1px 1px 1px green;
        }

        .text {
            text-align: center;
            margin-top: 5px;
        }

        .image:hover {
            border: 3px solid green;
        }

        /* media query used here */
        @media only screen and (max-width: 300px) {
            .box {
                flex-basis: 100%;
            }
        }

        @media only screen and (max-width:500px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>

<body>
    <div class="gallery">
        <div class="box">
            <div class="image">
                <a target="_blank" href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png" 
                         width="300"
                         height="300">
                </a>
            </div>

            <div class="text">
                Geeks Classes Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png" 
                         width="300"
                         height="300">
                </a>
            </div>

            <div class="text">
                GeekforGeeks Image
            </div>
        </div>

        <div class="box">
            <div class="image">
                <a target="_blank" 
                   href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png" 
                         width="300"
                         height="300">
                </a>
            </div>

            <div class="text">
                Geeks Image
            </div>
        </div>
    </div>
</body>

</html>

Output:

image gallery

Previous Article
Next Article

Similar Reads

How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery, and Bootstrap. Features or Functionalities to implement: Responsive imagesResponsive Grid SystemImage viewer Prerequisites: Ba
3 min read
How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?
A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will d
3 min read
Design an Expanding Image Gallery Template using HTML and CSS
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
2 min read
How to preview Image on click in Gallery View using HTML, CSS and JavaScript ?
In this article, we see how easily we can create an Image Gallery with a preview feature using HTML, CSS, and some JavaScript. ApproachCreate a div with a class container.Create two more div inside the first div one for the main view and the other for the side view with classes main_view and side_view.Inside the main view insert one image tag with
2 min read
How to create an image gallery with a horizontal scrollbar using CSS ?
In this article, we will learn how to create an image gallery with a horizontal scrollbar using CSS. It provides a way to navigate through a set of images, on scroll horizontally to view different pictures. This effect is helpful when space optimization of the web page is a concern that efficiently utilizes the horizontal space for displaying a lar
4 min read
Create an Image Gallery to view it in a Modal in Tailwind CSS
Modals are like pop-up windows that show content without navigating away from the page. By putting your image gallery in a modal, you give visitors a clear view of your images without any distractions. With Tailwind CSS, you can quickly set up and customize modal-based image galleries, making your website more engaging and user-friendly. Preview[ca
3 min read
Design a Rotating Image Gallery App in HTML CSS & JavaScript
We'll gather some images and build a gallery that can be rotated with straightforward buttons. To rotate the images to the right, we'll use the right button, and for left rotation, we'll use the left button. The process will be simple, allowing us to easily rotate the images using these buttons. Preview Image: Approach :To start, we make a folder.
3 min read
How to Create a Tab Image Gallery ?
To create a tab image gallery you need to use HTML, CSS, and JavaScript. HTML will make the structure of the body, and CSS will make it looks good. This kind of tab image gallery looks attractive on a website. By using JavaScript you can easily change the displayed pictures from the gallery. Creating Structure: In the HTML section, we will create a
2 min read
Animated sliding image gallery using framer and ReactJS
Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left. Prerequisites:Node.js and NPM React JSReact JS HooksApproach:To design an animated sliding image gallery using Framer in React we will be using the Page and Frame components for showing transitions. T
2 min read
Create an Image/Video Gallery using React-Native
An Image/Video Gallery is a common feature in mobile applications. This article will guide you for creating an Image/Video Gallery using React Native.We will learn to build an Image/Video Gallery app using React-Native. In this app, we will display the images and videos in the form of a grid, and on clicking, we can view them. If an image is clicke
5 min read
Article Tags :