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

Linda Hamilton
Release: 2024-10-31 07:27:30
Original
795 people have browsed it

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%;
}
Copy after login

HTML:

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

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!

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!