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:

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

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.

Visit my website for more tutorial like this