[Edit]

CSS - rotate image on hover

1 contributors

2 contributions

0 discussions

0 points

Created by:

Walter

586

In this article, we would like to show you how to rotate image on hover event using CSS.

Quick solution:

xxxxxxxxxx
 
img {
  transition: 1s;
}
​
img:hover {
  transform: rotate(360deg);
}

The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.

Practical example

Edit

In this example, we rotate the img element with the following steps:

in img style, we specify the image style at the beginning and use the transition property to smoothly rotate the img over 2 seconds,
we use img:hover pseudo-class with transform property inside that actually rotates the img element on the hover event.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    body {
      height: 200px;
    }
​
    img {
      height: 100px;
      margin: 30px;
      transition: 2s;
    }
​
    img:hover {
      transform: rotate(360deg);
    }
​
  </style>
</head>
<body>
  <img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
</body>
</html>