An image overlay is a second image placed directly over a base image. Think of it as the “after” photo waiting invisibly on top of the “before” photo—no magic cape required. section 20.5
To build the overlay effect:
- Put the base image and overlay image inside the same container. section 20.5
- Give the container relative positioning, then absolutely position the overlay at its top-left corner. section 20.5
- Match the overlay’s dimensions to the base image and raise it with z-index: 1. section 20.5
- Start the overlay at opacity: 0; change it to opacity: 1 on hover, with a transition for a gradual reveal. section 20.5
Before-and-after portfolio image
A restoration portfolio can show each book’s worn “before” image first. Hovering or tapping reveals the repaired “after” image above it, making the result easy to compare. section 20.5
.image-overlay {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 156px;
z-index: 1;
opacity: 0;
transition: opacity 1.5s ease;
}
.image-overlay:hover {
opacity: 1;
}
The CSS pairs absolute positioning, z-index, opacity, and a 1.5-second transition to create the reveal. section 20.5
