Home >Web Front-end >CSS Tutorial >How to Make Inset Box-Shadows Render Over Images?

How to Make Inset Box-Shadows Render Over Images?

Susan Sarandon
Susan SarandonOriginal
2024-11-04 06:47:011114browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn