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.