WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Image Gallery


Here's how to create an image gallery using CSS:


Image Gallery

The following Create a gallery with CSS::

Example

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> 
  </head> 
  <body> 
  <div class="img"> 
  <a target="_blank" href="waterfalls-210186.jpeg"> 
  <img src="waterfalls-210186.jpeg" alt="waterfalls" width="300" height="200"> 
  </a> 
  <div class="desc"> 
 Add a description of the image here</div> 
  </div> 
  <div class="img"> 
  <a target="_blank" href="cloudy-countryside-236047.jpeg"> 
  <img src="cloudy-countryside-236047.jpeg" alt="cloudy-countryside " width="300" height="200"> 
  </a> 
  <div class="desc"> 
 Add a description of the image here</div> 
  </div> 
  <div class="img"> 
  <a target="_blank" href="brown-wooden-house-128303.jpeg"> 
  <img src="brown-wooden-house-128303.jpeg" alt="brown-wooden-house" width="300" height="200"> 
  </a> 
  <div class="desc"> 
 Add a description of the image here</div> 
  </div> 
  <div class="img"> 
  <a target="_blank" href="woman-in-red-dress-930899.jpeg"> 
  <img src="woman-in-red-dress-930899.jpeg" alt="woman-in-red-dress" width="300" height="200"> 
  </a> 
  <div class="desc"> 
 Add a description of the image here</div> 
  </div> 
  </body> 
  </html> 
 
Try it yourself »