Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.

(UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters

Well done!

You have completed (UPI) Chapter 11: How to use CSS transitions, transforms, animations, and filters!

Sign up for Treehouse Back to Library
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 {
 ...