Adding CSS Rotate Effect To Images On Mouse Hover

In my last post I've shared with you "How To Add Zoom Effect To Images" and today lets discuss about the rotate effect. Rotate effect is one among the widely used image effects. You may have seen this effect used on lots of websites and blogs. Once you follow the below steps to add this effect to a particular image then that image will rotate while you hover your mouse over it. You can hover your mouse over the below image to see the rotate effect.

Demo:

Adding Rotate Effect To Images

1) Go To Your Blogger Dashboard Click > Template > Edit HTML > Proceed:

2) Using Ctrl+F Search For ]]></b:skin> and just below it paste the following Code:

.spinningeffect img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
} 

3) Click on "Save template" button!

4) Now when you want to apply rotate effect for an image use the below code

<a class="spinningeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

Note:

1) Replace "IMAGE-URL" with the URL of the image!

2) 0.8 represents the rate at which the image rotates.

3) 360 represents the degree at which the image rotates.

That's it! Now enjoy the rotate effect for the images on your blog!