How To Add Stylish Sliding Up Image Description Widget

Views:

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/AVvXsEgk52SQt41BdjcgRv3iDipvumbYM5atY5pUxr8E3G77Jy4oTE_UPL3aFiW13AV3NvnTaeK9RXkdAlhqGtW7EhFNnoNfjDoLXQ31_KPrrOD5BJUij8HrASFZ9BICZGJZhUzlYVaTeg36HCc/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.

Source: allblogtools