CSS Image Gallery

The following is the use of CSS to create an image gallery:

image.png


Picture gallery

The following is the use of CSS to create an image gallery:

Example

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://www.tutorialfish.com/images/demo/demo1.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/images/demo/demo1.jpg" alt="picture text description" width="300" height="200">
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://www.tutorialfish.com/images/demo/demo2.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/images/demo/demo2.jpg" alt="picture text description" width="300" height="200">
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://www.tutorialfish.com/images/demo/demo3.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/images/demo/demo3.jpg" alt="picture text description" width="300" height="200">
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://www.tutorialfish.com/images/demo/demo4.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/images/demo/demo4.jpg" alt="picture text description" width="300" height="200">
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>

 Try It! 

More Examples

Responsive image gallery

Use CSS3 media queries to create a responsive image gallery:

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_aaa.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/img_aaa.jpg" alt="img aaa" width="300" height="200" >
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>
 
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_bbb.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/img_bbb.jpg" alt="img bbb" width="600" height="400">
    </a>
    <div class="desc">Add the text description of the picture here</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_ccc.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/img_ccc.jpg" alt="img ccc" width="600" height="400" >
    </a>
    <div class="desc">Add the text description here</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_ddd.jpg">
      <img loading="lazy" src="http://www.tutorialfish.com/img_ddd.jpg" alt="img ddd" width="600" height="400">
    </a>
    <div class="desc">Add the text description </div>
  </div>
</div>
 
<div class="clearfix"></div>
 
<div style="padding:6px;">
  
<h4>Reset the browser size to view the effect</h4>
</div>

 Try It!