How to Add Stylish Sliding Up Image Description Widget For Blogger

We Got a new Widget i.e Stylish Sliding Up Image Description Widget For Blogger.Let's Play with this widget,this widget enable us to add description below image but How? Its not a unique to add description Below image ? Of-course but in this widget the description will be shown when One hover the mouse over the image and the description will be clearly seen.Does it make Sense,its looking Sound Good.With the help of CSS and HTML this widget can be added easily to Blog.

DEMO

How to Add Stylish Sliding Up Image Description Widget To Blogger

Visit Blogger.com
Go To Dashboard
Now Click On Layout
And Then Click On Add a Gadget
A Box will Pop-up
Select HTML/JavaScript
Now Copy the below Script and made the Necessary changes which is mentioned clearly
Paste it there and that's it !

<style>.image-box { width:280px;height:280px;overflow:hidden;background-color:white; border:1px solid #ccc;float:left;margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333;}.image-container,.image-details {height:280px;border:5px solid white;background-color:#ffc; transition:margin-top .4s ease-out .4s;}.image-container img { width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none; max-height:none; background-color:black;}.image-details h4,.image-details p { margin:0 0 .2em;padding:0 0;height:70px;}.image-details h4 { font-size:120%;height:auto;}.image-details .details { padding:10px 12px;overflow:hidden;}
.image-details .more { color:white;text-decoration:none;display:block; text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;}
.image-box:hover {border-color:#bbb; width:280px; height:280px;}.image-box:hover .image-container {margin-top:-160px}.image-details .more:hover {background-color:black}</style>
<div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box"> <div class="image-container"> <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyM18G7gT_e_IbbpPCFb9ou555-sEfsu-HpVR4MS5l9znWakYaWnvA-LWnQygRf32GziT8ipNID3nfgX-oTL5sxoD4y0mUAAZgijXltkfQGk7OhyphenhyphenAsGa0RdHnqaNMEbpoL309mf7mI24e/s640/a.aaa-Face-painted-by-hand.jpg" alt="Just"> </div> <div class="image-details"> <div class="details"> <h4>Lorem Ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..</p> <p><a class="more" href="Blog Post Link ">See More</a></p> </div> </div> </div>
<div style="clear:both;"></div>
</div>