How to Create a Hover-Activated Image Spin with CSS?

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.

<code class="css">img {
  transition: transform .7s ease-in-out;
}</code>

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.

<code class="css">img:hover {
  transform: rotate(360deg);
}</code>

3. HTML Implementation

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

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

Sample Code

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

<code class="css">img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}</code>

<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>

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

The above is the detailed content of How to Create a Hover-Activated Image Spin with CSS?. For more information, please follow other related articles on the PHP Chinese website!