CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS Image Gallery

Image galleries are used to display and store collections of images.

Example

Let’s discuss an example.

CSS was used to create the following image gallery:

Code is as follows:

<html>
<head>
<style>
div.gallery {
  margin: 6px;
  border: 1px solid rgb (185, 153, 153);
  float: left;
  width: 175px;
}


div.gallery:hover {
  border: 1px solid rgb(141, 112, 112);
}


div.gallery img {
  width: 105%;
  height: auto;
}


div.desc {
  padding: 16px;
  text-align: center;
}
</style>
</head>
<body>


<div class="gallery">
  <a target="_blank" href="coastline_image.png">
    <img src="coastline_image.png" alt="coastline - Cinque Terre" width="550" height="50">
  </a>
  <div class="desc">Here is where you can describe the image</div>
</div>


<div class="gallery">
  <a target="_blank" href="rivermountain_image.png">
    <img src="rivermountain_image.png" alt="river-mountain" width="550" height="410">
  </a>
  <div class="desc">Here is where you can describe the image</div>
</div>


<div class="gallery">
  <a target="_blank" href="northlight_image.png">
    <img src="northlight_image.png" alt="Northern-Lights" width="550" height="410">
  </a>
  <div class="desc">Here is where you can describe the imagee</div>
</div>


<div class="gallery">
  <a target="_blank" href="forest_image.png">
    <img src="forest_image.png" alt="Forest.." width="550" height="410">
  </a>
  <div class="desc">Here is where you can describe the image</div>
</div>


</body>
</html>

The output for this above code is shown below:

CSS Image Gallery

Responsive Image Gallery

The following example essentially shows how to make a responsive Image Gallery using HTML and CSS.

The following steps will help you essentially create a responsive image gallery:

  • Step 1: Laying out the kind of basic structure of a gallery.
    There are some div sections in each gallery. Within each div section, an image and a description are displayed.
<div class="gallery">
  <div class="box"> 
    <div class="image"> The image is added here </div>
    <div class="text"> The text is added here </div>
  </div>
  • Step 2: A CSS style sheet can be used to style the file
    Here essentially are some guidelines for styling the gallery container:
    Select flex as the display property. It literally means that items within the gallery container will display in a flex context in a big way.
    To set the flex-flow property to row wrap, set it to true, or so they thought. This specifies both the direction of flexing and the style of wrapping.
.gallery {
  width:110%;
  display:flex;
  flex-flow: row wrap;
}

- Box styling is done below:

.box {
    flex-basis: 18%;
    width: 110%;
    padding: 11px;
    margin: 9px;
     // Set the blur shadow
    box-shadow: 1px 1px 14px 1px red; 
}

-  Step 3: By using @media query to make a responsive image gallery

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

Code is as follows:

<!DOCTYPE html>
<html>
      
<head>
    <style>
      
        /* style to set body of page */
        body {
            width:90%; 
            margin:auto;
        }
        .gallery {
            width:90%;
            display:flex;
            flex-flow: row wrap;
        }
        .box {
            flex-basis:18%;
            width:90%;
            padding:11px;
            margin:9px;
            box-shadow: 1px 1px 14px 1px red;
        }
        .text {
            text-align:center;
            margin-top:5px;
        }
        .image:hover {
            border: 3px solid red ;
        }
          
        /* media query used here */
        @media only screen and (max-width: 300px) { 
            .box {
                flex-basis: 100%;
            }
        }
          
        @media only screen and (max-width:300px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>
  
<body>
    <div class = "gallery">
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"javatpoint logo_image.png">
                    <img src =
"javatpoint logo_image.png" 
                width = "300" height = "200">
                </a>
            </div>
              
            <div class = "text">
                Javatpoint Image
            </div>
        </div>
      
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"logo image.png">
                    <img src =
"logo image.png"
                width = "300" height = "200">
                </a>
            </div>
              
            <div class = "text">
                Javatpoint Image
            </div>
        </div>
          
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"Javatpoint img.png">
                    <img src = 
"Javatpoint img.png" 
                width = "300" height = "200">
                </a>
            </div>
              
            <div class = "text">
                Javatpoint Interview qns Image
            </div>
        </div>
</body>
</html>

The output for this above code is shown below:

(Responsive image gallery is shown in output)

CSS Image Gallery
  • Some more example for responsive image gallery:
  • Here are some CSS media queries that you can use to make a responsive image gallery that will look good on any device, including desktops, tablets, and smart phones.

Example

Code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid rgb(233, 133, 133);
}


div.gallery:hover {
  border: 1px solid rgb(241, 121, 121);
}


div.gallery img {
  width: 90%;
  height: auto;
}


div.desc {
  padding: 14px;
  text-align: center;
}


* {
  box-sizing: border-box;
}


.responsive {
  padding: 0 6px;
  float: left;
  width: 23.99999%;
}


@media only screen and (max-width: 600px) {
  .responsive {
    width: 48.99999%;
    margin: 5px 0;
  }
}


@media only screen and (max-width: 460px) {
  .responsive {
    width: 90%;
  }
}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>


<h2> Responsive Image Gallery </h2>
<h4>The effect can be seen by resizing the browser window. </h4>
<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="coastline_image.png">
      <img src="coastline_image.png" alt="coastline Cinque-Terre" width="500" height="300">
    </a>
    <div class="desc">Here is where you can describe the image</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="rivermountain_image.png">
      <img src="rivermountain_image.png" alt="River - Mountain" width="500" height="300">
    </a>
    <div class="desc">Here is where you can describe the image</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="northlight_image.png">
      <img src="northlight_image.png" alt="North lights.." width="500" height="300">
    </a>
    <div class="desc">Here is where you can describe the image</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a target="_blank" href ="forest_image.png">
      <img src="forest_image.png" alt="forest_image..." width="500" height="300">
    </a>
    <div class="desc">Here is where you can describe the image</div>
  </div>
</div>


<div class="clearfix"></div>


<div style="padding: 6px;">
  <p>Media queries and responsive web design will be covered in more detail in our CSS tutorial. </p>
</div>
</body>
</html>

In this example, we use media queries to change the arrangement of the images on different screen sizes: <br> for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px wide, <br> it will show two images side by side. When the screen size is less than 500px, the images stack vertically (100%).

The output for this above code is shown below:
(Responsive image gallery is shown in output)

CSS Image Gallery CSS Image Gallery



ADVERTISEMENT
ADVERTISEMENT