Rotate You Image When Mouse Hover Over It

You might have seen my RSS button of right side bar and my picture in About the Author below posts rotate 360 degree when mouse hover it. Many users of Blogging Sentral have requested it.
This feature makes your specific images look different and unique. We will be doing this by using CSS code. We will be rotating/animating our images without Java Script and for this you will need to add codes in your site. By the help of CSS you can further enhance your blog. It doesn't affects your blog layout and loading time.
In this post i will be teaching you how is image rotated when mouse hover. For best experience of this cool effect you will be needing latest browsers. Before going to this stuff here is the live example.

So here we go then;

ADDING IN THE CODE:

• Login to your blogger account.
• Be forwarded to the template code of your blog.
• Find  ]]></b:skin>  in it.
• After you found it add the below code just above it;

/* --------- Blogging Sentral Image Rotation ----- */ 
.opacity  { 
opacity: 0.5; 
margin-left: 50px; 
-moz-transition: all 1s ease-out;   
-o-transition: all 1s ease-out;   
-webkit-transition: all 1s ease-out;   
-ms-transition: all 1s ease-out;   
transition: all 1s ease-out; 
-moz-transform: rotate(360deg);   
-o-transform: rotate(360deg);   
-webkit-transform: rotate(360deg);   
-ms-transform: rotate(360deg);   
transform: rotate(360deg);   
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(360deg);   
-o-transform: rotate(360deg);   
-webkit-transform: rotate(360deg);   
-ms-transform: rotate(360deg);   
transform: rotate(360deg);   
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; 
}.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

•  After you have added above code save your template.

MAKING IMAGE TO ROTATE:

After you added CSS code it's time to rotate your image. It's very easy. Whenever you wish to rotate image just add class="opacity" in your image html code. Example of it is given below;

<img src="Your Image Link" border="0" alt="Image Description Here" class="opacity">

After you have made it your image should rotate whenever mouse hover over it. Enjoy with new CSS effect and stay updated with us.
If you have any confusion then comment below. We are waiting for your comments;