Animated Caption and Description Hover Effect for Blogger Images

By : Follow Trends

On : 9/06/2015

In : Blogger Tips

0 comments

Actually you can add that swap animation for blogger images if you want to make blog attractive.Anyway,Today im gonna explain simple tutorial about How to add Animated Caption and description Hover effect for blogger Images. Every modern browsers support with this effect. You can add this to blogger side bar by re-size images.Im just using CSS3 for this animation effect.Hope you can understand it.if you have any problem regarding to this tutorial let me know. Use below button for demo.

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/AVvXsEjkMaFRQ5fyOzgYF5JvUEG7Mu2EPGVkVGT-WMoBbxWHmo5-1aumX1m9o3ovNHcUhvGhNyU_2rWDL6ifo61O_bdjpYftwoY-_vR6uVtrgNmH4S0wmAp5aBADIZC1hVmhME9WrMrl9w-LjNI/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/AVvXsEi3YXlJUmG1TsqO8LLH-ZppLzGgMbFYo_GVN9w3sC7bH8bVxnwecl01gx9V6spicoGacq4WJRSSBzgft2ypA6LmF2P9Imd7RaeYKWaAjZg5n_1wovy_B6UoqyxiprSYPRa1HNgZKFHwPis/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'.