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);
}
Would you like to help us improve 30 seconds of code?Take a quick survey
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.
CSS, Visual
Displays an image overlay effect on hover.