Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How to Add Stylish Sliding Up Image Description Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add Stylish Sliding Up Image Description Widget

How to Add Stylish Sliding Up Image Description Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,561 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="http://2.bp.blogspot.com/-XtTVaIhT6dE/UX9-IAg95uI/AAAAAAAAAhg/FQzPqv9htEY/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.

Liked It ? Please Share

Comments

7 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Sazal Ahmed says:

    I’ll surely apply this on my blog here —> Probloggerlab– Everything about blogging.

  2. info yang sangat bagus sekali gan,., saya sangat terbantu dengan info yang anda berikan kepada kami.,.

  3. Thanks a lot! Your article is pretty good. I like it

  4. Hi marvin,This widget is so cool.Thanks For sharing it.wallpapers

  5. It’s right what I needed! Thank you so much!

  6. Essay Help says:

    I always shared your site post with my friends. Keep posting and i will follow you..

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here