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.
Now, let's add this effect in our blog. Follow my steps to add it in your blog;
  • Go To Blogger Dashboard
  • Select Your Blog
  • Click On Template
  • Click On Edit HTML
  • Search For This Code: ]]></b:skin> Using CTRL + F
  • Paste The Following Code Just Above ]]></b:skin>

.smasherimg {
opacity:
0.6;
border:3px solid #808080;
margin-left: 0px;
-o-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
zoom: 1;
}
.smasherimg:hover {
-moz-transform:rotate(360deg);
opacity: 1;
border:
5px solid #D70E3C;
-o-transform:rotate(360deg);
transform: rotate(360deg);
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
zoom: 1;
}
Customizations
  • Change #D70E3C to your desired border color
  • Change 5px to your desired border size
  • 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 .smasherpic with .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!!
Happy Blogging!!!

Share this

Related Posts

Previous
Next Post »

2 comments

comments
Anonymous
March 8, 2015 at 8:52 AM delete

Will It Work In Websites Too

Reply
avatar
March 8, 2015 at 8:53 AM delete

Sure, It works. Just follow the same steps of that of blogger and It will work....
Subscribe Us !

Reply
avatar