16-CSS Image Gallery

0
49

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here