সিএসএস ইমেজ গ্যালারী - Css Image Gallery

<style>
.child{
   border:1px solid #999;
   margin:5px auto;
   padding:0;
   box-shadow:1px 2px 3px #ccc;
   }

.child:hover{
   border:1px solid #777;
   padding:0;
   box-shadow:1px 2px 3px #666;
   opacity:0.8;
   }
   
.childimg{
   opacity:1.0;
   }

.childp{
   text-align:center;
   color: #222;
   font-weight:700;
   text-decoration:none;
   padding:1em;
   }
   
.expa:hover{
   text-decoration:none;
   }
</style>

<div class="row content expcon" >

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-one.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-two.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-three.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-four.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

</div>