DEV Community

Cover image for How to make Image rotate on hover using HTML and CSS
Kaja Uvais
Kaja Uvais

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)