How to Apply Inset Box-Shadow to Images with CSS?

Inset Box-Shadow and Images: A Workaround

Utilizing inset box-shadow on containers containing images often results in the shadow not appearing over the images. To overcome this limitation, one can resort to a unique CSS solution.

By employing the :after pseudo element, a second shadow-carrying layer can be created. Here's a sample code demonstrating this technique:

CSS:

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

HTML:

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

This method eliminates the need for additional elements in the markup, offering a clean and CSS-based approach. The :after element acts as a "shadow container" that overlays the image, allowing the inset box-shadow to extend over it.

The above is the detailed content of How to Apply Inset Box-Shadow to Images with CSS?. For more information, please follow other related articles on the PHP Chinese website!