Saturday, August 15, 2015

How To Add Rotating Effect Image To Your Blog

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.
Look at below demo image


So how to insert this method on your blog please see at below my instruction
1. Go to your blog and log in with your email and password
2. Now Go to your blog dashboard "Template > Edit HTML > Procced"
3. Press "CTRL+F" to find the text ]]></b:skin> and paste the following code just above 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);
}


4. You can 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