Add Rotating Effect for Images in Blogger Using CSS

Add Rotating Effect for Images in Blogger Using CSS
In my blog I had shared many tricks using CSS. Today I wanna share a different trick by using CSS code snippet. Before that let me ask you one question. Do you wanna your image be different from other bloggers. Then you can add a rotating effect to your images using CSS. What you have to do is just copy the below code and paste it in your HTML.



 How to Make rotating images with CSS
Its a simple method. Which means its that much easy to do. Just follow below steps carefully.

  • Go to Blogger Dashboard >Layout
  • Click on Add a Gadget
  • Copy and paste the below code ▼ in it

<style>p#image img {
    -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;
}
p#image img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<p id="image"
 <a href="LINK">
<img src="IMAGE LINK" /></a>

Replace LINK and IMAGE LINK with your own properties. If you wanna add the image to our blog post follow below two simple steps to make It real.

  • Switch your blog post from Compose to EDIT HTML while you writing post
  • Copy the above code and paste It in your blog post where you wanna display rotating effect

Hope you like it. You can test this CSS trick in HTML editor if you want. If you face any problem feel free to ask via comments. Happy blogging:)