--> Rotate/Animate Images Using CSS3 Without JavaScript! | Experience Lab - Online business creation and development guide for bloggers and startups

Rotate/Animate Images Using CSS3 Without JavaScript!

CSS3 has many new powers with which we can further enhance our websites, without extensive knowledge of JavaScript, or without really effect...

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.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Rotate/Animate Images Using CSS3 Without JavaScript!
Rotate/Animate Images Using CSS3 Without JavaScript!
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrLMwhHK9uoBEUe4zXQ6AMRkUyRvqMXXZf3yWq4ve3UvyR2eZefrIS9cI7nQod4IhGRBwWAaHd79zTexhyCqrOrGt3ni-QYOzSQZwBVNx_d4OlxRkfqqxBRyh9soV2Xw37ARIHSLLS0E/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrLMwhHK9uoBEUe4zXQ6AMRkUyRvqMXXZf3yWq4ve3UvyR2eZefrIS9cI7nQod4IhGRBwWAaHd79zTexhyCqrOrGt3ni-QYOzSQZwBVNx_d4OlxRkfqqxBRyh9soV2Xw37ARIHSLLS0E/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/06/rotateanimate-images-using-css3-without.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/06/rotateanimate-images-using-css3-without.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy