Add Spinning/Rotating Effect to Images in Blogger

Recently we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts , Add Zoom Effect to Images on Mouse Hover in Blogger and today we've another image effect for you. This effect rotates the image to 360 degree when you move your mouse cursor on the image. To see how this hover effect works move your mouse cursor on the image below.

How to Add Spinning/Rotating Effect to Images

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Edit HTML and Search for the following tag

]]></b:skin>

Step 3. Copy the below code and Paste it just above/before it

.spineffect img {
/* Spinning/Rotating Effect for Images By www.blogolect.blogspot.com */
    -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;
}

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

You can change the degree at which you want to rotate image by changing degree value 360

Step 4. Hit the Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to spineffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

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

From Editors Desk

I hope this tutorial helped you in learning How to Add Spinning/Rotating Effect to Images in Blogger. Share this article with your friends and don't forget to subscribe us!