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 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 transformproperty.

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.

Read the full tutorial

Visit my website for more tutorial like this

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.