Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Add Spinning Or Rotating Effect To Your Blog Images

Adding different effect to your blog images is another great way of engaging your readers, probably they will stay longer on your blog if they found out that your blog images are having different effect and they might want to check more of your blog images to see the awesome effect.
In my previous post, i also shared a tutorial on how to add zoom effect to blog images and how to add a spinning social icons which might be of interest to you. For a demo of this tutorial, hover your mouse cursor on the image below.

DEMO:



How To Add Spinning Effect To Images

  • Go to your blog dashboard
  • Click on Template > Edit HTML > Proceed
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

.spinningeffect img {
 /* Spinning Social Icons Widget By www.realcombiz.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;
}

.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
  • Click on Save template
You can easily customize the spinning effect to your own satisfaction by editing the code below.

  • To change the rate (time taken) at which the image rotate, simple edit 0.8s
  • You can also change the degree at which the image rotate by editing 360deg

How To Activate It On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the div class of the image to spinningeffect.
Example: Your image class in post editor will be <div class="separator", now change the class to <div class="spinningeffect"
If you want to apply the effect to other images, use the code below.

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

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

7 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Great! Used it immediately, see: http://gerritendekrekels.blogspot.nl/2013/01/johnny-cash-top-50-nummer-11-en-12.html

    ReplyDelete
  2. hmmmmmm...........good


    http://mybloggingclub.blogspot.com

    ReplyDelete
  3. do you have this kind of tutorial for wordpress user? this spinning effect.. i must have it!

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. Awesome! http://funwithcrack.blogspot.com/

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger