Wednesday, July 18, 2012

How To Add Attractive Css Image Hover Effect To Blogger

This is nice hover effect for blogger images.
so you can add it to your blog with simple steps.
You can check my earlier post about images.
Jquery Image Zoom Effect For Blogger, and
How To Add CSS Cool Image Effect For
Blogger
. you can try it.Check below for demo.

Attractive Css Image Hover Effect

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

2. Find this tag by using Ctrl+F    ]]></b:skin>

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

.bteffect {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.bteffect:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

4. Now, when you make a post, you can paste below code.

<img class="bteffect" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXI9S5gJz64tHVmz87HlT9_e85LpQgj63g_xPU0qgiCaiiN1n1Ta2Yr6VMMO9J8l_h4CbGpj29vKfkJEvtgHalfhbpdAqhDcoYCWVPckMZ9YH_qvnB4dDwtNbO1KI-1LpP1wnAF0pQwjt/s1600/Your_Choice_is_Your_Way_by_Osokin.jpg" width="320" />

Now you can replace your image link with highlighted link above.
Now Publish post and check it. you are done.








1 comment:

  1. good try but not so technical...Join me on some creative fun and facebook @kirtigautam.in

    ReplyDelete