box shadow issue with transparent parts of an image

Question

I'm trying to add a box-shadow to my image, but my image has some transparent parts and in this case there's a problem with box-shadow, in order to understand my problem take a look at this code:

.framed-image {
    background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

.image-menu {
    width: 300px;
    height: 200px;
    background-size: 100% 100% !important;
    -moz-box-shadow: 0 3px 8px rgb(136, 136, 136);
    -webkit-box-shadow: 0 3px 8px rgb(136, 136, 136);
    box-shadow: 0 3px 8px rgb(136, 136, 136);
}

<div class="image-menu-parent">
            <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
        </div>

As you can see theres a white background at transparent parts of the image! how can i use box-shadow in the right way? thanks for your time ♥

score 5 · Accepted Answer · answered Apr 09 '18 at 10:59

You can use filter with drop-shadow.

Check out the supported browsers in this list.

.framed-image {
  background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
  background-size: cover;
  padding: 18px;
  object-fit: cover;
}

.image-menu {
  width: 300px;
  height: 200px;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://placehold.it/1/365f83">
</div>

Another example:

.framed-image {
  background-size: cover;
  padding: 18px;
  object-fit: cover;
}

.image-menu {
  width: 300px;
  height: 200px;
  background-size: 100% 100% !important;
  filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

<div class="image-menu-parent">
  <img class="framed-image image-menu" src="http://www.pngpix.com/wp-content/uploads/2016/10/PNGPIX-COM-Bald-Eagle-PNG-Transparent-Image.png">
</div>

score 1 · Answer 2 · answered Apr 09 '18 at 10:58

1

In short, I don't believe you can with box-shadow as it puts it around the image and won't follow any transparencies. You could however put a drop shadow in the image itself to get the affect you're looking for.

answered Apr 09 '18 at 10:58

John

685
1
6
20

score 1 · Answer 3 · answered Apr 09 '18 at 11:06

.framedImage {
    background: url("https://cdn.pbrd.co/images/HfNQr1M.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

.image {
    width: 300px;
    height: 200px;
    background-size: 100% 100% !important;
    filter: drop-shadow(0 3px 8px rgb(136, 136, 136));
}

<div class="parent">
   <img class="framedImage image" src="http://placehold.it/1/365f83">
</div>

box shadow issue with transparent parts of an image

3 Answers3