CSS IMAGE GALLERY

rainbow baker

 CSS IMAGE GALLERY

  • Image Gallery is used to store and display a collection of pictures. This example creates a responsive Image Gallery using html and css.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery 
{
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover 
{
  border: 1px solid #777;
}
div.gallery img 
{
  width: 101%;
  height: auto;
}
div.desc 
{
  padding: 16px;
  text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

OUTPUT

            







Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send