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.
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
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
* 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.
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.
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.
wow nice tips...thanks for sharing...
ReplyDeletewhoa cool trick :) i like it, im gonna put those code to my blog
ReplyDeleteI cnt find ]]> on my template? How i can follow this tricks?
ReplyDeleteif you cant fidn ]]>.
ReplyDeletefind this code and paste above code after it.
border-bottom: 1px solid #ccc;
}
(this is just for your template not for others)
think to try this.. thanks guys.. :)
ReplyDeleteThe animation will make the webpage look more interactive.
ReplyDeletedont know what css will add to my blog:
ReplyDeletehttp://ibnee.blogspot.com
Follow steps correctly , you will get it.
ReplyDeleteyou have really explained it so well,. Thanks for sharing the details
Deletenice trick for CSS animated
ReplyDeleteGood CSS Animation, I will check and apply for my own cases.
ReplyDelete