This content originally appeared on DEV Community and was authored by Kaja Uvais
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.
Visit my website for more tutorial like this
This content originally appeared on DEV Community and was authored by Kaja Uvais
Kaja Uvais | Sciencx (2024-09-18T05:45:07+00:00) How to make Image rotate on hover using HTML and CSS. Retrieved from https://www.scien.cx/2024/09/18/how-to-make-image-rotate-on-hover-using-html-and-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.