Add Stylish Sliding Up Image Description Widget In Blogger

Today in this post I'm going to show you that How to Add Stylish Sliding Up Image Description Widget to your blogger blog. This widget adds a great look to your blog. If you have a special/popular post then you can add it on the sidebar of your blog and link to the post. Just follow the following steps to add this widget to your blogger blog.

Adding Slide Up Image Description Widget

Step 1. Go to Blogger Dashboard >> Layout >> Add A Gadget

Step 2. Now Choose HTML/JavaScript From the list of Gadgets

Step 3. And Paste the following Code in the HTML/JavaScript Box

<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/AVvXsEi0MkO25nGXK6XZXhrtRC6TKCUujUb-Ijwu9HKEleJVhQ-EgS2yGF7oCrTF1mF4D01-CH6HajJksJbAP5eXUBxW0XXlkxv9v2Rff0APFzpCvV9cMV2FIK9FGUZlhAdESYHtaW4uuBher5o/s1600/3.jpg" alt="Food" />
</div>
<div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Post Description</p>
    <p><a class="more" href="Post Link">More</a></p>
   </div>
</div>
</div>

<div style="clear:both;"></div>

</div>

Customization:

Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MkO25nGXK6XZXhrtRC6TKCUujUb-Ijwu9HKEleJVhQ-EgS2yGF7oCrTF1mF4D01-CH6HajJksJbAP5eXUBxW0XXlkxv9v2Rff0APFzpCvV9cMV2FIK9FGUZlhAdESYHtaW4uuBher5o/s1600/3.jpg With Your Image Link.
Replace Lorem Ipsum With Your Post Article.
Replace Post Description With Your Post Description.
Replace Post Link With Your Post Link.