Images plays great role in blogger,with using images you can speak mind or you can tell what is your article is about.Today we are sharing another cool CSS hack.In this hack we will rotate blogger images some degrees and when any visitor hovers on image the image will return back to normal position,this effect attracts anyone.We will apply this hack with using a small snippets of CSS code.So without waiting anymore let's go to the tutorial :
Tilt Image Effect Demo ?
How To Add Tilt Image Effect To Blogger
- First Go to your Blogger Dashboard > Design > Edit HTML.
- Download a copy of your template.
- Now find for below code in your template.
]]></b:skin>
add below piece of code just above of above code
.post img {
-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);
}
.post img: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);
}
Now save your template and you are done....
I hope you will like this little hack.Post your coomets and queries below in comment box.
Post a Comment