Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.
Well done!
You have completed (UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters!
Instruction
Example: Rotating an Image with Hover
In this example, when a user hovers over an image, it rotates 180 degrees on the Y-axis, giving a mirrored effect.
HTML
<p>
<img src="images/image.jpg" alt="Original image">
<img src="images/image.jpg" alt="Mirrored image" class="mirrored">
</p>
CSS
.mirrored {
transition: 2s; /* Smooth transition over 2 seconds */
}
.mirrored:hover {
transform: rota...