How to Add Animated Caption and description Hover effect for Blogger Images

1. Go to Blogger Dashboard > Layout
2. Click Add Gadget and select 'HTML/Javascript'
3. Paste below code.

/* The CSS Code for the image starts here bloggertrix.com
<style>
#bt_imageeffect {
   margin: 20px auto;
  width: 100%;min-height: 300px; padding: 20px 0;
  text-align: center;
 }
.galleryItem {
 display: inline-block;;
 position: relative;
 width: 250px; height: 250px;
 padding: 0;margin: 0 20px;
 border: solid 10px #fff;

 -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
 width: 250px;height: 250px;
}
.caption {
 position: relative;
 display: inline-block;
 width: 250px; height: 250px;
 z-index: 10;
}
.caption::before {
 content: attr(data-title);
 position: absolute;top: 0; left: 0;
 width: 250px; height: 0;
  font-family: 'Croissant One', cursive;
 font-size: 1.8em;font-weight: 600;
 line-height: 1.4em;color: #086FA1;
 background: #fff;
 overflow: hidden;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption::after {
 content: attr(data-description);
 position: absolute;
 bottom: -0;left: 0;
 width: 250px;height: 0;
  font-family: 'Poiret One', cursive;
 font-size: 1.1em;
 font-weight: 400;
 line-height: 1.4em;color: #fff;
 background: #222;
 overflow: hidden;

 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption:hover::before {
 height: 125px;
}
.caption:hover::after {
 bottom: 0;height: 125px;
}
</style>

<div id="bt_imageeffect">
<li class="galleryItem">
  <a class="caption" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi." data-title="Nature Scene" href="#">
  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcqYXtjGqC7JAITxDZnGVLrcBDLvXJjwDJr2Oj9JIKZyGE79MKOuRw7ZI8_VckfIGzylVrzPDc7GnEO2Ucu5XGXb6HLiCKeuM5Ry4BRxRP1J_dniW1teeFpk5Hl5VzlYfjFfE67zf0d8/s1600/Green+Nature+Wallpapers.jpg"/>
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. " data-title="SunFlower" href="#">
  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFQh9KZlztyIkQq9DSsJhL4suVjY8HTNjOdtU_CmNn0bXwHUES_6y7F3MmtLhE1o3CelqHBFeNh_iR-vcMy5CFa_142LGo9NUEYNhvh2WaTuKFQBkVGLfNQ58TkvM1cdTfoTk-tD_GO4/s1600/nature_3.png" />
  </a></li></div>

Replace # with your links. 
Replace Blue color text With your image description 
Replace Red color Link with your Image link.

4. Now save your HTML/Javascript'.
You are done. If you have any problem related to this Animated Caption and description Hover effect. Just leave a comment.I will help to you.