WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Image Gallery


CSS can be used to create an image gallery.

Trolltunga Norway
Add a description of the image here
cloudy-countryside
Add a description of the image here
brown-wooden-house
Add a description of the image here
woman-in-red-dress
Add a description of the image here

Image Gallery

The following image gallery is created with CSS:

Example

<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 »