Animated Caption and Description Hover Effect

DEMO

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

<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/AVvXsEhsU8awcInlErv8ESX0yMg48-SvVi4HOgAH6MuNw_aHFDVLmTzv8YNrH14MpsBcGgBqhVqQN0LydcUAjRwMkI1lvFZAfF0qY_lcyhyphenhyphenNRhtoVZxxiwQlXvNrS46TjrZyoTWBK9qxjTlSsyY/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/AVvXsEj9fq1NAMumCDcFw18tiG1rxhcBRzMkPAlcwgAvV6rvKGJS4qnXqA7ET8LwflCu3eO3iuMwfLl1VRNaT48wNGqmYcXlC-BCeQkk-u2_QvWtPKIwiVSuWPN8B-cjmZaKWatmoM6T4QSpgF8/s1600/nature_3.png" /> </a></li></div>

Replace # with your links.
Replace "Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. " text With your image description
Replace "Nature Scene" and  "Sunflower" Link with your Image link.

4. Now save your HTML/Javascript'.

You are done