Box-shadow is not working on my image element - html

Question

box-shadow is not working on my image element - I'm talking about .card img:nth-child(1). Here is my HTML code:
.card {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.card img:nth-child(1) {
height: 220px;
width: 100%;
object-fit: cover;
box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75);
clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%);
}
.card img:nth-child(2) {
height: 150px;
width: 150px;
object-fit: cover;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, .7);
margin-top: -40%;
z-index: 2;
}
<div class="card">
<!--img src="img/card-bg1.jpg"-->
<img src="https://via.placeholder.com/550" />
<!-- I'm talking about this image -->
<!--img src="img/profile1.jpg"-->
<img src="https://via.placeholder.com/150" />
<h2>Jane Smith</h2>
<p>FrontEnd Developer</p>
<p>Esdsdsd.</p>
<button type="button">Message me!</button>
</div>
Why isn't it working?

Answer 1

The box shadow is properly applied also on the second image, but you are clipping it using the clip-path property
.card {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.card img:nth-child(1) {
height: 220px;
width: 100%;
object-fit: cover;
box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
.card img:nth-child(2) {
height: 150px;
width: 150px;
object-fit: cover;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, .7);
margin-top: -40%;
z-index: 2;
}
<div class="card">
<img src="img/card-bg1.jpg">
<!-- I'm talking about this image -->
<!--img src="img/profile1.jpg"-->
<img src="https://via.placeholder.com/150" />
<h2>Jane Smith</h2>
<p>FrontEnd Developer</p>
<p>Esdsdsd.</p>
<button type="button">Message me!</button>
</div>

Answer 2

You need to wrap the image in a parent element set to the same size, and use filter: with drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.75)); on the parent element to create the shadow effect that you want.
You can see the parent element I have added is a div with the class "img-wrap".
.card {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.card img:nth-child(1) {
height: 220px;
width: 100%;
object-fit: cover;
box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75);
clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%);
}
.img-wrap {
height: 220px;
width: 100%;
filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.75));
}
.card img:nth-child(2) {
height: 150px;
width: 150px;
object-fit: cover;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, .7);
margin-top: -40%;
z-index: 2;
}
<div class="card">
<div class="img-wrap">
<img src="https://picsum.photos/id/237/200/300"> <!-- I'm talking about this image -->
</div>
<img src="https://picsum.photos/id/237/200/300">
<h2>Jane Smith</h2>
<p>FrontEnd Developer</p>
<p>Esdsdsd.</p>
<button type="button">Message me!</button>
</div>

Answer 3

You can't use box-shadow on that parent either, because the parent is still a rectangle and the shadow will look wrong.
.tag-wrap {
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
.tag {
background: #FB8C00;
color: #222;
padding: 2rem 3rem 2rem 4rem;
font: bold 32px system-ui;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%);
}
<span class="tag-wrap">
<span class="tag">
drop-shadow
</span>
</span>

Answer 4

The problem is that clip-path is overriding box-shadow styles.
You then need to create a new parent and use the drox-shadow filter to it to retain the polygonal shape.
Please, have a look here for a clear presentation and solution of the problem.

Answer 5

Just remove clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%); from .card img:nth-child(1). If you need clip-path and box-shadow both together you need to add one parent class to clip-path and give that class filter: drop-shadow(0px 10px 5px 0px rgba(0, 0, 0, 0.75));
.card {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.card-img:nth-child(1){
height: 220px;
width: 100%;
object-fit: cover;
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
.card img:nth-child(1) {
height: 220px;
width: 100%;
object-fit: cover;
clip-path: polygon(0 0, 100% 0, 100% 86%, 63% 100%, 28% 87%, 0 100%);
}
.card img:nth-child(2) {
height: 150px;
width: 150px;
object-fit: cover;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 0 10px rgba(0, 0, 0, .7);
margin-top: -40%;
z-index: 2;
}
<div class="card">
<div class="card-img">
<img src="img/card-bg1.jpg">
</div>
<!-- I'm talking about this image -->
<!--img src="img/profile1.jpg"-->
<div class="card-img">
<img src="https://via.placeholder.com/150" />
</div>
<h2>Jane Smith</h2>
<p>FrontEnd Developer</p>
<p>Esdsdsd.</p>
<button type="button">Message me!</button>
</div>