How to Make Inset Box-Shadows Render Over Images?

Inset Box-Shadow and Image Overlap

In a scenario where a container with inset box-shadow contains both images and text, it may appear that the shadow does not render over the images. This issue occurs because the inset shadow is applied to the container itself, while the image is a separate element within the container.

To resolve this issue and achieve the desired shadow effect, consider using the :after pseudo element:

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

By adding this CSS, a semi-transparent box is created over the image, effectively allowing the inset shadow to extend over the full area of the container, including the image.

The above is the detailed content of How to Make Inset Box-Shadows Render Over Images?. For more information, please follow other related articles on the PHP Chinese website!