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
- Go To Blogger > Design > Edit HTML
- Backup your template
- Search for ]]></b:skin>
- Just above it paste the following code
/* --------- MBT Image Rotation ----- */
-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;
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
-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 here" class="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:
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 »