Add Animated CSS Image Labels For Blogger Part 2

Oleh Unknown

13 Ekim 2012 Cumartesi

Bagikan :

Tweet

few days ago i was post   about    similar tutorial about this.This is the parrt 2 of it. you can  add this  effect   to  your sidebar image or post images like earlier 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 topright">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 1" /></a>
 </div>

 <div class="label centertop">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 2" /></a>
 </div>
 
 <div class="label centerbottom">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 3" /></a>
 </div>
 
 <div class="label centerleft">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 4" /></a>
 </div>
 
 <div class="label centerright">
   <p>Image Title</p>
<a href="Link URL" target="_blank">
   <img src="Image URL 5" /></a>
 </div>

 *ReplaceURLs as your like.

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

Tag : Animation, CSS, HTML, Image, Label