Add 360 Degree Rotating Effect In Any Blogger Images

Hi guys, It's Nischal Khanal, new admin of Blogger Smasher. Our previous admin Mr. Ajaya Gajurel has posted about importance of images in blogger posts before 2 years. Really, image is very important in blogosphere. The things that we cant describe can be described by images. So, Leonardo Da Vinci also considered image as a worth thousands of words.

Lets come to our point guys, today we shall be discussing how to rotate image up to 360 Degrees when we hover our mouse upon it.

For a live demo, you can hover your mouse to this below picture of Neymar Jr. When you guys hover your mouse up to it, it rotates up to 360 Degrees.

If You want to make the image totally opaque, change 0.6 To 1 in opacity

Save Your Template

For Rotating Images Of Whole Blog;

Guys, if you want to make all the images to rotate of your blog, follow my steps. Or if you want to rotate only specific pictures, skip these steps

Steps to rotate all images of blogger posts;

Change .smasherpicwith .post img

Save The Template

Now, the effect will be saved in your template. But, for rotating it in specific images of blogger posts, you must paste a code in every images. It isn't much hard as it sounds.

Follow my steps to rotate specific images in blogger posts;

Create A New post

Write all the informations that you need to post

Upload Images that you need to hover

Open the post editor from HTML Mode

Just before your image Tag, paste the following code;

<div class="rotate">
<img src="Your Image URL"/>
</div>

Finally publish the post

You Are Done

Now, when you hover the mouse over the image which you have made rotate, it will rotate up to 360 degrees. That's all guys, If you enjoyed this tutorial, be sure to share this posts. Stay tuned for different fantastic posts. Till Then, Good bye Guys!!