CSS Image Gallery

Published by StudyMuch on April 26, 2022April 26, 2022

CSS Image Gallery

In this tutorial you will learn how to make a basic Image Gallery, that mean how to create and design the image gallery with the help of HTML and CSS. Here we provided you full guidance to make image gallery and also given here programming examples of Image Gallery.

An image gallery is used to showcase images or pictures in your websites in an organized way. You can create image gallery for your website and your own portfolio.

Here we created two types of Images Gallery; Mouse Over Effect and Simple Image Gallery with programming.

Important things before creating Image Gallery

Before anything else let’s first make sure that we avoid unexpected results by setting the box-sizing property to border-box of all elements.
This makes sure that the padding and borders don’t add up to the actual rendered width of the elements.
It is also recommended to remove the default margin and padding of the elements.

*{box-sizing:border-box;}
        html, body {
         margin: 0;
         padding: 0;}

This is coding of CSS is important to make the Image Gallery.

Creating the Image Gallery

Now here we ready to making the first programming example of image gallery. Here we make a simple image gallery but it is beautiful with CSS properties.

Simple CSS Image Gallery

Programming of CSS Image Gallery;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>Image Gallery</title>
    <style type="text/css">
        *{box-sizing: border-box;}
 html,body{ margin: 0;
        padding: 0;}
 img{width: 100%;
        height: auto;}
 .image-c{margin: 0 auto;
        width: 80%;
        box-shadow: 0
15px 30px black, 0 11px 8px blue;
        margin-bottom: 20px;
        background: lightblue;}
 .image-d{ padding-bottom: 5px;
        text-align: center;
        margin-top: 0%;}
        h2{text-align: center;
        color: darkgreen;
        text-shadow: 2px 1px 3px red;}
    </style>
</head>
<body>
    <h2>Image Gallery</h2>
    <div class="gallery">
      <div class="image-c">
          <img src="web image3.jpg">
          <p class="image-d">Greenland</p>
      </div>
      <div class="image-c">
          <img src="web image8.jpg">
          <p class="image-d">Sunrising</p>
      </div>
      <div class="image-c">
          <img src="webimage5.jpg">
          <p class="image-d">Beach</p>
      </div>
      <div class="image-c">
          <img src="webimage6.jpg">
          <p class="image-d">Love</p>
      </div>
      <div class="image-c">
         <img src="webimg12.jpg">
         <p class="image-d"> Beauty Scene</p>
      </div>
  </div>
</body>
</html>

Output of above Image Gallery programming;

Image Gallery

CSS image gallery

CSS image Gallery

Above you see the output of programming. It is simple and beautiful Image Gallery; you can make it more beautiful with using of CSS properties.

Mouse Over Effect Image Gallery

Now here you see the different Image Gallery, we added here in this programming of Image gallery mouse over effect. Look below the programming and output below to better understanding.

Programming of Mouse over Effect Gallery;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
initial-scale=1.0">
    <title>Image Gallery</title>
    <style type="text/css">
        *{box-sizing: border-box;}
 html,body{ margin: 0;
        padding: 0;}
 img{width: 100%;
        height: auto;}
 .image-c{margin: 0 auto;
        width: 30%;
        box-shadow: 0
15px 30px black, 0 11px 8px blue;
        margin-bottom: 20px;
        background: lightblue;
        transition-duration: 1s;}
 .image-c:hover{
        width: 35%;
        box-shadow: 0 18px 30px
green,0 14px 11px black;}
 .image-d{
        padding-bottom: 5px;
        text-align: center;
        margin-top: 0%;}
 h2{text-align: center;
        color: darkgreen;
        text-shadow: 2px 1px 3px red;}
    </style>
</head>
<body>
    <h2>CSS Image Gallery</h2>
    <div class="gallery">
      <div class="image-c">
          <img src="web image3.jpg">
          <p class="image-d">Greenland</p>
      </div>
      <div class="image-c">
          <img src="web image8.jpg">
          <p class="image-d">Sunrising</p>
      </div>
      <div class="image-c">
          <img src="webimage5.jpg">
          <p class="image-d">Beach</p>
      </div>
      <div class="image-c">
          <img src="webimage6.jpg">
          <p class="image-d">Love</p>
      </div>
      <div class="image-c">
       <img src="webimg12.jpg">
       <p class="image-d"> Beauty Scene</p>
      </div>
  </div>
</body>
</html>

Look below the Programming Output of Hover Effect Image Gallery;

Here the output video of Hover Effect Image Gallery.

Above you can see the output of hover effect image gallery, it shows very fantastic when we added the hover effect. You can copy our programming code for revision purpose.

So, in this tutorial you learned how to make a simple and beautiful Image Gallery with the help of CSS. You make this better then above all programming through using more CSS properties.

I hope you read this tutorial well and learn something new from this tutorial. If you have any doubt from this tutorial, you ask in the comment section.

NOTE; You can copy programming code from our website for educational purpose.

Read Also-

3 Comments

zoritoler imol · July 2, 2022 at 12:17 am

I really like your writing style, wonderful information, regards for putting up : D.

graliontorile · August 27, 2022 at 7:25 am

There are some interesting deadlines in this article but I don’t know if I see all of them heart to heart. There may be some validity but I will take hold opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as properly

zoritoler imol · September 13, 2022 at 1:18 am

Generally I do not read post on blogs, but I wish to say that this write-up very forced me to try and do it! Your writing style has been amazed me. Thanks, quite nice article.