How To Add Image Rotation Effect On Mouse Hover To Blogger

Add some special effects to various items in your blog is another way of engaging your readers to your blog.In this post, we have made a very simple but effective rotation effect to blogger images.

Demo:

Steps To Add This Image Rotation Effect To All Images:

• Log in to your Blogger Account.
• Go to Templates >> Edit HTML.
• Find for ]]></b:skin> tag. 
• Paste the below code before the closing of ]]></b:skin> tag.

img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
img:hover {
-webkit-transform:rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform:  rotate(1080deg);
-ms-transform: rotate(1080deg);
transform: rotate(1080deg);
}

• Now, click on Save The Template.

Steps To Add Image Rotation Effect To Specific Images:

• Log in to your Blogger Account.
• Go to Templates >> Edit HTML.
• Find for ]]></b:skin> tag. 
• Paste the below code before the closing of ]]></b:skin> tag.

.rotate {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate:hover {
-webkit-transform:rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform:  rotate(1080deg);
-ms-transform: rotate(1080deg);
transform: rotate(1080deg);
}

• Now, click on Save the Template. 
• Now, paste the following code where you want to add image with rotation effect.

<img class="rotate" src="Put Your Image Link Here" alt="Alternate Text" title="Title Text" />

What You Need To Do:

• Now replace the blue text with the respective text. 

So now you can enjoy the rotation effect in your blog.