How to make Image rotate on hover using HTML and CSS

A hover-rotate effect on images can make your content more engaging and interactive. In this tutorial, we'll walk you through how to create a simple yet eye-catching hover-rotate effect using just HTML and CSS.

How to Create the Effect

HTML:

First, add the following HTML code:

  
<figure class="hover-rotate">
  
  <img src="example.jpg" alt="Sample Image"/>
  
</figure>
  

You can add any image you like.

This code sets up an image wrapped in a <figure> tag with a class of hover-rotate.

CSS:

  
.hover-rotate {
  
  overflow: hidden;
  
  margin: 8px;
  
  min-width: 240px;
  
  max-width: 320px;
  
  width: 100%;
  
}
  


  
.hover-rotate img {
  
  transition: all 0.3s;
  
  max-width: 100%;
  
}
  


  
.hover-rotate:hover img {
  
  transform: scale(1.3) rotate(5deg);
  
}
  

How It Works:

The <figure> tag acts as a container for the image, applying the hover-rotate class.

The .hover-rotate class sets the image's dimensions and hides any overflow. The .hover-rotate img class handles the smooth transition effect.

When you hover over the image, it scales up by 1.3 times and rotates 5 degrees, thanks to the transform property.

Conclusion:

Adding a hover-rotate effect to your images can be a simple yet effective way to make your website more dynamic. With just a few lines of code, you can create an engaging visual experience that draws users in.

If you found this tutorial helpful, feel free to share it with others or leave a comment below. For more tips and tricks on web design, be sure to check out our other posts.