CSS Tip

A color overlay above your images

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.

More CSS Tips