Box-shadow on an element with -webkit-mask-image

Question

I have a div with background-image inside another div with -webkit-mask-image , because border-radius in this case did not work on WebKit browsers.

If I set box-shadow to the parent div, it appears in Firefox , but not in Chrome . How can I override -webkit-mask-image so that I can use box-shadow too?

Here is a working example (open the link in Firefox and Chrome to see the difference): http://jsfiddle.net/RhT3e/3

Answer 1

The problem is that box-shadow -webkit-mask-image with -webkit-mask-image , since this option clamps anything, including the box-shadow element.

Decision

Use the mask image as another element displayed below the masked image so you can use it to render the shadow. To do this, we need to know the width and height of the image, which is initially masked. If you do not know the size of the image, or if it is dynamic, you can use JavaScript.

The problem we are facing is that we cannot use box-shadow , because it will display a window shadow that will not match the shape of the mask.

box-shadow does not display around the shape

---

Instead , we will try to emulate it using the drop-shadow filter.

I prefer to wrap an image that is masked using a div with the same size and has a background image of a mask image. Here is how it will look.

HTML

 <div class="image-container"> <img class="wrap-image" src="Origional Image URL" id="wrap-image"> </div> 

CSS

 .image-container{ width: Original Image Width; height: Original Image Width; background-size: 100%; background-image: url(URL of Mask Image); -webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -moz-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -ms-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); -o-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); } #wrap-image{ mask: url("URL of Mask Image"); -webkit-mask-box-image: url("URL of Mask Image"); } 

Here is jsfiddle