3

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 ♥

Mehdi Karimi
  • 528
  • 4
  • 25

3 Answers3

5

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>
Phiter
  • 14,570
  • 14
  • 50
  • 84
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.

John
  • 685
  • 1
  • 6
  • 20
1

.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>
bilu sau
  • 41
  • 1
  • 8