Try it Editor: CSS Image Gallery

Edit This Code :

<!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: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>



<div class="gallery">
  <a target="_blank" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73h3FH2OwlluzvFdXnwcGTl2iKGSLKW6LrKRin52VPNNzh83MghA-vdYunPMIoX-Uabd-cYWeF8-k2sx5CHNm5dIulQZQnKzW2c8YfStThoPC53GS0LbU8fjgVWEVpI5AUoC7hosV14f0/s320/img_mountains.jpg">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73h3FH2OwlluzvFdXnwcGTl2iKGSLKW6LrKRin52VPNNzh83MghA-vdYunPMIoX-Uabd-cYWeF8-k2sx5CHNm5dIulQZQnKzW2c8YfStThoPC53GS0LbU8fjgVWEVpI5AUoC7hosV14f0/s320/img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
Result :