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 transform
property.
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
If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe
Thanks For reading.
Top comments (0)