CSS Image Gallery Properties Tutorial

Netbax Online Editor Try it Yourself

div.photo:hover {
  border: 1px solid #777;
}

div.photo img {
  width: 100%;
  height: 120px;
}

div.photod {
  padding: 10px;
  text-align: center;
}
</style>

<div class="photo">
  <a target="_blank" href="../../../images/test1.jpeg">
    <img src="../../../images/test1.jpeg" alt="img" width="100" height="100">
  </a>
  <div class="photod">Add a description of the image here</div>
</div>

<div class="photo">
  <a target="_blank" href="../../../images/test2.jpeg">
    <img src="../../../images/test2.jpeg" alt="img1" width="100" height="100">
  </a>
  <div class="photod">Add a description of the image here</div>
</div>

<div class="photo">
  <a target="_blank" href="../../../images/test3.jpeg">
    <img src="../../../images/test3.jpeg" alt="img2" width="100" height="100">
  </a>
  <div class="photod">Add a description of the image here</div>
</div>

<div class="photo">
  <a target="_blank" href="../../../images/test4.jpeg">
    <img src="../../../images/test4.jpeg" alt="img3" width="100" height="100">
  </a>
  <div class="photod">Add a description of the image here</div>
</div>