Skip to main content
CSS Tip

A color overlay above your image

Add a color overlay above your image using only 3 declarations

You can also have a cool transition on hover

A color overlay above an image

img {
outline: 100vmax solid rgb(0 0 0/var(--_o,50%));
outline-offset: -100vmax;
/* keep only the image area visible */
mask: linear-gradient(#000 0 0);

transition: outline-color .4s;
}
img:hover {
--_o: 0%;
}

See the Pen Overlay image (no extra element) by Temani Afif (@t_afif) on CodePen.