bartekw2213
bartekw2213

Reputation: 81

Box-shadow is not working on my image element

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?

Upvotes: 0

Views: 954

Answers (5)

Doggit
Doggit

Reputation: 111

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>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

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>

Upvotes: 0

Ferie
Ferie

Reputation: 1436

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.

Upvotes: 0

user12361441
user12361441

Reputation:

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>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

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>

Upvotes: 2

Related Questions