Image Rotate Hover CSS and HTML

Image Hover effects using CSS have been quite famous in web developing and pretty handy in giving attractive looks to your site. This is an image rotate hover effect using simple CSS and HTML. This one is called as photo rotate effect in which the image will undergo rotations and display it at a tilted angle giving the look of a cool photo rotate hover effect. This kind of effect is well suited for galleries in your site and integrating this effect with other images will give a classy look to your site.

VIEW DEMO

PREVIEW OF THIS HOVER EFFECT:

Here is a simple preview of this photo rotate hover effect and in this the images should be carefully placed to avoid the overflow of images over one another. It should also be properly aligned to keep the attraction of this effect intact.

#photo_rotate img{
       width: 400;
       height:400;
       -moz-border-radius: 50%;
       -webkit-border-radius: 50%;
       border-radius: 50%;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
      padding:4px;
      border:1px solid #000 !important;
                          }
#photo_rotate img:hover {
       border-radius: 0 0 0 0;
       -moz-transform: scale(1.2) rotate(-711deg) ;
       -webkit-transform: scale(1.2) rotate(-711deg) ;
       -o-transform: scale(1.2) rotate(-711deg) ;
       -ms-transform: scale(1.2) rotate(-711deg) ;
       transform: scale(1.2) rotate(-711deg) ;
                                        }

In the above code rotate property was used to produce this cool hover effect. You can assign the rotate degree values of your wish but in here -711 deg was used to make the image rotate anticlockwise and the image rotation stops before completion of 2nd rotation. Border radius was given as 50% to alter the shape of the image to a circle. You can alter these values to change the effect produced and careful placement of images is necessary to avoid overlapping of images over one another.

HTML CODE:

 <div id="photo_rotate">
<img src="Your image URL"></img>
</div>