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
Look at below demo image
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);
}
/* 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