A color overlay above your images
Add a color overlay above your image using only 3 declarations
- No extra element (only the
<img>tag) - No pseudo element
- Works with rounded image
You can also have a cool transition on hover
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.