Creates a rotate effect for the image on hover.
scale()
, rotate()
and transition
properties when hovering over the parent element (a <figure>
) to animate the image.overflow: hidden
on the parent element to hide the excess from the image transformation.<figure class="hover-rotate">
<img src="https://picsum.photos/id/669/600/800.jpg"/>
</figure>
.hover-rotate {
overflow: hidden;
margin: 8px;
min-width: 240px;
max-width: 320px;
width: 100%;
}
.hover-rotate img {
transition: all 0.3s;
box-sizing: border-box;
max-width: 100%;
}
.hover-rotate:hover img {
transform: scale(1.3) rotate(5deg);
}
Snippet collection
A collection of cool CSS hover effects to spice up your next web project.
CSS, Animation
Creates a squiggle effect when hovering over a link.
CSS, Animation
Creates a two sided card which rotates on hover.
CSS, Animation
Creates an animated underline effect when the user hovers over the text.