In this post im going to  explain,  how to
add animated labels for your images. you
can add this effect to your sidebar image
or post images.Im using CSS and  HTML
for this tutorial.I added demo link. so you
can check it before   apply    to your blog.
Get my earlier image effects posts here.


Demo

1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.


3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

6.  Paste below code Before ]]></b:skin> code

/* Bloggertrix  */
.label { 
 /*Position*/
 overflow: hidden;
 position: relative;
 margin: 20px;
 display: inline-block;
 vertical-align: top;
 
 /*Skin*/
 border: 7px solid #fff;
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
 display: block;
}
.label p {
 /*Position*/
 position: absolute;
 padding: 10px;
 width: 100%;
 
 /*Skin*/
 background: #000; /*fallback*/
 background: rgba(0,0,0,0.7);
 color: #fff;
 font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
 /*Animation*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
 top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
 top: -50%;
}

/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
 bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
 bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
 left: 0%;
}

/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
 left: -150%;
}

/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
 left: 150%;
}

/*Centered From Bottom*/
.centerbottom:hover p {
 bottom: 50%;
}

/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
 top: 50%;
}

/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
 margin-top: -20px;
}

.centerbottom:hover p {
 margin-bottom: -20px;
}

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div class="label top">
   <p>Your Title</p>
   <img src="Image URL 1" />
 </div>
 
 <div class="label bottom">
   <p>Your Title</p>
   <img src="Image URL 2" />
 </div>
 
 <div class="label bottomright">
   <p>Your Title</p>
   <img src="Image URL 3" />
 </div>
 
 <div class="label bottomleft">
   <p>Your Title</p>
   <img src="Image URL 4" />
 </div>
 <div class="label topleft">
   <p>Your Title</p>
   <img src="Image URL 5" />
 </div>

 *ReplaceURLs as your like.

10. Now save "HTML/Javascript". You are done.

Related Blogger Tips