Как установить тень блока внизу, когда родительский div скрыт переполнением?

Question

Привет, ребята! Я хочу тень блока без изменений структуры div. Я пытался установить тень блока в столбце содержимого, но я установил переполнение, скрытое в div Коробка преимущества, потому что я также хочу, чтобы при масштабировании при наведении основного фона при наведении курсораУберите переполнение скрытого CSS, чем фоновое изображение погружения из основного раздела, поэтому я установил скрытое переполнение.это возможно, когда вы удаляете переполнение скрытым, чем показ тени, но мой эффект масштаба фонового изображения показывает плохо.Какое решение для этого типа проблем

.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

Ты не можешь! Переполнение скрыто означает переполнение скрыто. Вы должны реструктурировать свой 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>

Answer 2

Сделайте изображение дополнительным элементом, и вам нужно только применить переполнение к его родителю:

.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>

Если вы хотите сохранить фоновое изображение:

.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>

Другая идея без изменения 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;
  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>