Monday, April 25, 2011

How to add CSS animated hover to blogger

How to add CSS animated hover to blogger

Earlier i made post about How to make image hover
(mouse over button)  i used 2 image for that. But this
is totally different. i used CSS and use 1 image for it.
special thing is you can add description for this.
you can see below image for demo. move your mouse
 to there.lets  see how to make it.





Your text here












1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

<!--Start animated hover-->
#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
<!--End animated hover-->

Now you can add this zoom hover for your image for anywhere your blog. ill give a example to do this

5. Click on "Posting" >> "New Post" and  go to Edit HTML

6. Paste below code where you want

<div id="image-hover">
<div id='figure'>
<a href="http://www.bloggertrix.com" target="_blank">
<img src="Image URL"></a>
<span class='caption'>
Your Text here
</span></div></div>

* Replace Image URL with your image URL
* Replace Your Text Here with your text
* Replace http://www.bloggertrix.com your URL
you are done.Good luck.

11 comments:

  1. wow nice tips...thanks for sharing...

    ReplyDelete
  2. whoa cool trick :) i like it, im gonna put those code to my blog

    ReplyDelete
  3. I cnt find ]]> on my template? How i can follow this tricks?

    ReplyDelete
  4. if you cant fidn ]]>.
    find this code and paste above code after it.

    border-bottom: 1px solid #ccc;
    }

    (this is just for your template not for others)

    ReplyDelete
  5. think to try this.. thanks guys.. :)

    ReplyDelete
  6. The animation will make the webpage look more interactive.

    ReplyDelete
  7. dont know what css will add to my blog:
    http://ibnee.blogspot.com

    ReplyDelete
  8. Follow steps correctly , you will get it.

    ReplyDelete
    Replies
    1. you have really explained it so well,. Thanks for sharing the details

      Delete
  9. Good CSS Animation, I will check and apply for my own cases.

    ReplyDelete