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.






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;
       -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;
      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.


 <div id="photo_rotate">
<img src="Your image URL"></img>
HTML part of this code is pretty simple in nature all you have to do is place the images inside a <div> tag with id “Photo_rotate” in it.
The following two tabs change content below.
Frank Donald
Frank Donald is an Electronics and Communication Engineer who loves building stuff in his free time. Video games, blogging and programming are the things he loves most
Frank Donald

Latest posts by Frank Donald (see all)

Ask your query

Notify of