How to Add Stylish Sliding Up Image Description Widget

Another widget that adds a great look to your Blogger site is the sliding up image description. You can incorporate this stylish widget via this tutorial by the guys at Bloggertrix. You can add it on the sidebar and if you have a special post, you can link it as well. CSS and HTML are basically used so it’s easy to customize if you wish to change the images.

• Blogger Dashboard > Layout

• Add Gadget > HTML/Javascript

• Paste this code

<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/AVvXsEiGXWnWMcpNj5963pqi4gljzB5L1HJGMB1V4EzmA2oY-hxX0ag2tYR3FBT3_-4RjfP0fWhETKsQRrUWDlTMrySH2QZ0HT213ovSOg6HhIkwnvY6bq1H1fSH8s3kxbWFMcfTaM19G_nXCkU/s1600/3.jpg" alt="Food">
  </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="Post Link ">More</a></p>
   </div>
  </div>
 </div>
 

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

</div>

• Save.

Note: Make a backup of your template before attempting to edit it.

Share it Please

Tweet

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.