How to set box shadow bottom when parent div is overflow hidden?

Question

Hello guys I want box shadow without div structure changes I was try to set box shadow in content column but I set to overflow hidden in advantages-box div because also I want on hover background image div scale on main dive hover when I remove overflow hidden CSS than background image dive show out of the main div so I set to overflow hidden. that is possible shadow when you remove overflow hidden than show shadow but my background image scale effect is showing bad. What is the solution for this type of issues

.features-box {
                padding: 100px 0;
                background-color: rgba(56,74,100,.1);
            }
            .content {
                padding: 30px;
                background-color: #fff;
                position: relative;
            }
            .content:after {
                content: '';
                position: absolute;
                width: 100%;
                bottom: 0;
                height: 2px;
                left: 0;
                -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                box-shadow: 0 2px 2px 0 rgba(0,0,0,.06);
                z-index: 9;
            }
            .advantages-box {
                overflow: hidden;
            }
            .advantages-box .left {
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                transition: .3s;
            }
            .advantages-box:hover .left {
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-xl-10 advantages-box">
                        <div class="row h-100">
                            <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
                            </div>
                            <div class="col-6 h-100 p-0 position-relative right">
                                <div class="content d-flex flex-column align-items-start text-left h-100">
                                    <h5>What is Lorem Ipsum one?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                    <h5>What is Lorem Ipsum two?</h5>
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

Maybe an obvious solution/workaround, but if you must retain the HTML structure, and none of the other solutions work for you, you can consider one or more of the following strategies to mitigate the problem:

• Increase padding on the item to allow more space for the shadow
• Reduce the size of the box shadow so it fits and doesn't overflow
• Move the absolute positioned element with the shadow a bit more to the left

Depending on your situation, this may or may not provide relief from this problem.

Answer 2

Make the image an extra element and you only need to apply overflow on its parent:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left img {
  height: 100%;
  width: 100%;
  object-fit: none;
  transition: .3s;
}

.advantages-box:hover .left img {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
            <img src="http://placekitten.com/1000/500">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

If you want to keep the background image:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
}

.advantages-box .left div {
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  transition: .3s;
}

.advantages-box:hover .left div {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left">
          <div style="background-image:url(http://placekitten.com/1000/500)"></div>
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Another idea without changing the HTML is to rely on pseudo element and inheritance for the background:

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
  z-index: 9;
}

.advantages-box .left {
  overflow: hidden;
  position:relative;
  z-index:0;
}
.advantages-box .left:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  transition: .3s;
}

.advantages-box:hover .left:before {
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 h-100 p-0 position-relative left" style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

You can't! Overflow hidden means overflow hidden. You must restructure your HTML

.features-box {
  padding: 100px 0;
  background-color: rgba(56, 74, 100, .1);
}

.content {
  padding: 30px;
  background-color: #fff;
  position: relative;
}

.content:after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 2px;
  left: 0;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  -ms-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06);
  z-index: 9;
}

.advantages-box .image-wrapper {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.advantages-box .image {
  -webkit-transition: transform .3s;
  -moz-transition: transform .3s;
  -ms-transition: transform .3s;
  transition: transform .3s;
}

.advantages-box:hover .image {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="features-box">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-10 advantages-box">
        <div class="row h-100">
          <div class="col-6 p-0 position-relative image-wrapper">
            <div class="image h-100 w-100 " style="background-image: url(http://placekitten.com/1000/500); background-repeat: no-repeat; background-position: center center;">A</div>
          </div>
          <div class="col-6 h-100 p-0 position-relative right">
            <div class="content d-flex flex-column align-items-start text-left h-100">
              <h5>What is Lorem Ipsum one?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
              <h5>What is Lorem Ipsum two?</h5>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>