Image Gallery using HTML and CSS

Image Gallery using HTML and CSS

2 years ago

An image gallery is a great of showing off high-quality images on your site. You could use it to show your shop products, photographs you've taken, and many other things relevant to your business. It is used when you want to display a series of photos in a gallery on a post or webpage. Here's an example of an image gallery..

The image gallery can be created using HTML and CSS. The following image gallery is created with CSS and simple HTML Code.

Download Project

<!DOCTYPE>
<html>
  <head>
    <title>Image Gallery</title>
    <style type="text/css">
      .main{
      margin: 20px;
      padding: 50px;
      }
      div.gallery {
      margin: 10px;
      border: 1px solid #ccc;
      float: left;
      width: 180px;
      box-shadow: 4px 3px;
      }
      div.gallery:hover {
      border: 1px solid #777;
      }
      div.gallery img {
      width: 100%;
      height: auto;
      }
      div.desc {
      padding: 15px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="gallery">
        <a target="_blank" href="images/image_1.jpg">
          <img src="images/image_1.jpg" alt="Cinque Terre" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="images/image_2.jpg">
          <img src="images/image_2.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="images/image_3.jpg">
          <img src="images/image_3.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="images/image_4.jpg">
          <img src="images/image_4.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="images/image_4.jpg">
          <img src="images/image_5.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>

      <div class="gallery">
        <a target="_blank" href="images/image_4.jpg">
          <img src="images/image_6.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
      
    </div>
  </body>
</html>