Hover-Activated Image Spin

Incorporating dynamic behavior into your web pages, such as image rotations on hover, can enhance user engagement. To achieve this effect with CSS on an image with a circular border, follow these steps:

1. CSS3 Transitions with rotate()

Utilize CSS3 transitions to smoothly rotate the image on hover. The transition property defines the duration and easing function for the animation. In this case, we set the transition duration to 0.7 seconds and specify an ease-in-out easing function.

img {
  transition: transform .7s ease-in-out;
}

2. Hover Transformation

To rotate the image on hover, we use the transform property with the rotate() function to set the desired angle of rotation. In this example, we rotate the image 360 degrees.

img:hover {
  transform: rotate(360deg);
}

3. HTML Implementation

Within your HTML code, place an image element with the appropriate source and size.

Sample Code

Here's a complete code sample demonstrating the spinning image effect:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

With this code, whenever the user hovers over the image, it will rotate 360 degrees smoothly.