Build hover effects by combining tools

transition and transform — two tools are now in place. This time we’ll combine them to build a card-that-lifts-up effect you see often on the web.

The card-that-lifts-up effect

Try moving your cursor over it.

The trick is simple. On :hover, transform: translateY(-6px) moves it up a little, and box-shadow is made deeper and wider. Those two are just smoothed with transition.

Make it feel clickable: use active too

On top of :hover (while the cursor is on it), specify :active (while it’s being pressed) too, and you get a satisfying “pressed” feel the instant it’s clicked.

:active is the state that’s active only while the mouse button is held down. Let go and it returns to :hover (the state of just resting on it).

A card that zooms only the contents

Here’s one more, an effect you see often on cards with photos: “only the inner image gradually enlarges.” The key is to put overflow: hidden on the outer frame so that the enlarged part isn’t shown outside the frame.

What to notice is the selector. .photo-card:hover .photo-card__img — a way of writing that means “when the cursor lands on the card, change the inner image.” The element that receives the hover and the element that moves can be separate. Knowing this form widens your range of effects all at once.

Summary of this lesson

1. transition can smooth several properties at once, separated by commas
2. For a lift effect, the combination of transform: translateY() and box-shadow is the standard
3. :active gives the reaction the instant it’s pressed, and overflow: hidden lets you zoom only the contents
4. Motion is refined when it’s restrained