ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

16-CSS Image Gallery

Today we are going to learn about CSS Image Gallery. In CSS, you have the option to create the image dimensions according to your wish.You can put several images in a particular format by dimensions of each and every image.

Here in the following example, I have created a set of four images along with their descriptions added in a box of every image.

 

  1. <!DOCTYPE html>
  2. div.img {
  3.     margin: 6px;
  4.     border: 2px solid #ccc;
  5.     float: left;
  6.     width: 180px;
  7. }  
  8.  
  9. div.img:hover {
  10.     border: 2px solid #777;
  11. }
  12.  
  13. div.img img {
  14.     width: 100%;
  15.     height: auto;
  16. }
  17.  
  18. div.desc {
  19.     padding: 18px;
  20.     text-align: center;
  21. }
  22. </head>
  23.  
  24. <div class="img">
  25.   <a target="_blank" href="img_r.jpg">
  26.     <img src="img_r.jpg" alt="first image" width="350" height="250">
  27.   </a>
  28.   <div class="desc">Add a description of the first image here</div>
  29. </div>
  30.  
  31. <div class="img">
  32.   <a target="_blank" href="img_2.jpg">
  33.     <img src="img_2.jpg" alt="second image" width="650" height="430">
  34.   </a>
  35.   <div class="desc">Add a description of the second  image here</div>
  36. </div>
  37.  
  38. <div class="img">
  39.   <a target="_blank" href="img_3.jpg">
  40.     <img src="img_3.jpg" alt="Northern Lights" width="650" height="420">
  41.   </a>
  42.   <div class="desc">Add a description of the 3rd image here</div>
  43. </div>
  44.  
  45. <div class="img">
  46.   <a target="_blank" href="4.jpg">
  47.     <img src="img_4.jpg" alt="Fourth image" width="650" height="420">
  48.   </a>
  49.   <div class="desc">Add a description of the fourth  image here</div>
  50. </div>
  51.  
  52. </body>
  53. </html>
Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!