The CSS :hover pseudo-class lets a rule spring into action when a pointing device is over an element. Think of it as a tiny “mouse is here” switch: the ordinary rule defines the resting state, and the :hover rule changes it while the pointer is over the element. section 15.8
A pseudo-class is added to a selector after a colon. Here, .image-caption selects the caption, while .image-caption:hover selects that same caption only during hover. The caption begins with opacity: 0, so it is hidden; the hover rule changes opacity to 1, making it visible. section 15.8
Reveal a photo caption
Place a caption over a thumbnail with absolute positioning, give it the thumbnail’s width and height, and hide it with opacity: 0. Then add: .image-caption:hover { opacity: 1; } When the pointer moves over the caption area, its dark, partly transparent overlay appears and the photo can still show through. section 15.8
Hover can also reveal a second image. An overlay positioned at the top-left of a relative container starts invisible with opacity: 0. On hover, it becomes visible. Add transition: opacity 1.5s ease to the overlay rule and the change fades in rather than popping into view like a startled jack-in-the-box. section 20.5
REMEMBER
- Write :hover directly after the selector you want to react, such as .image-caption:hover. section 15.8
- Set a default state first, then change just the needed property during hover. section 15.8
- Use matching dimensions and positioning when an overlay must cover an image exactly. section 15.8 section 20.5
- Use a transition when an opacity change should animate. section 20.5
.image-caption:hover {
opacity: 1;
}
This short rule is the whole hover trigger: the caption becomes fully opaque while hovered. section 15.8
