June 18, 2011

Rotate/Animate Images Using CSS3 Without JavaScript!


animated imageCSS3 has many new powers with which we can further enhance our websites, without extensive knowledge of JavaScript, or without really effecting our website’s loading time. With less than ten lines of CSS coding, we can achieve each of the following effects.  Changing CSS properties on mouse-hover and using CSS3 transitions were used for these enhancements. You can now easily animate the images on your WordPress or Blogger blogs using the simple image opacity effect below that rotates the image on mouse hover.

Live Demo

 

Note: You need a up to date browser to fully experience the effects. This includes pretty much the latest version of any browser other than IE.

Animating Images In Blogger With CSS3

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Just above it paste the following code

 

/* --------- MBT Image Rotation ----- */
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);  
-o-transform: rotate(5deg);  
-webkit-transform: rotate(5deg);  
-ms-transform: rotate(5deg);  
transform: rotate(5deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;  
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

Edit the bolded values to increase or decrease the angle of rotation.   

5. Save your template and done!

How it works?

Whenever you wish to implement this effect, simply add the following code in Edit HTML mode of your Post Editor, to turn or rotate the images:

<img src="IMAGE LINK HERE" border="0" alt="Image Description hereclass="opacity" />

Make these changes:

  • Replace IMAGE LINK HERE with the Image URL of the pic
  • Replace Image Description here with Image name or description. Optional


We hope you enjoyed the effect, and happy blogging! Peace!

You may also like these effects:

Anims


About the Guest Author:

Anims is freelance web designer and enjoys playing around with and learning coding in his free time. He likes to write about Web Technologies such as HTML, CSS and SEO. He is a valuable MBT contributor.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

4 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. thank you mr muhammad mustof thank God I've tried it and succeeded, although I failed a few times but finally succeeded. Thank you very much

    ReplyDelete
  2. @akang


    We are glad buddy that it worked for you. All credits goes to anims for this. :)

    ReplyDelete
  3. Hi Mohammad

    The code works fine, but I wish there was room for another link besides the URL, so you could click through to another blog-post via the image.

    Is it something you know how to add???

    Thanx so much in advance! :)

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!