CSS Image Gallery
The following is the use of CSS to create an image gallery:
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>
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>