How to Spin an Image on Hover with CSS?

Hover-Triggered Image Spinning

For many web applications, it is desirable to add interactive animated effects to enhance user engagement. One such effect is to spin or rotate an image when a user hovers over it. This article demonstrates how to achieve this functionality using CSS on a circular image.

CSS Implementation for Image Rotation

To create a spinning image on hover, you can utilize CSS3 transitions with the 'rotate()' property. The following CSS code snippet provides the necessary styles:

<code class="css">img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}</code>

Explanation:

• The 'transition' property sets the duration and transition effect for the 'transform' property changes. In this case, the transition will take 0.7 seconds with an 'ease-in-out' effect.
• When the user hovers over the image, the 'hover' style is applied.
• The 'transform' property with 'rotate(360deg)' rotates the image 360 degrees, creating the spinning effect.

Applying the Style to HTML

In the HTML code snippet below, an image is embedded using the 'img' tag:

<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></code>

By linking the CSS code to this HTML page, the image will spin when the user hovers over it. This demonstrates a simple and effective technique for adding interactive elements to web applications.

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