Радиус границы фонового изображения - белые углы

Question

Я пытался создать эффект наклона на Hover с помощью CSS и JS. Я использовал библиотеку Vanilla Tilt JS, и это хорошо работает.

После того, как я хотел добавить нижнюю тень к изображениям, которые нужно наклонить при наведении, но у меня проблема с белыми углами. Изображения округляются до border-radius, а при наведении курсора на нижний угол белый цвет находится между изображением и тенью.

Проблема:

Мой код: https://jsfiddle.net/p8gzcnut/5/

Может кто-нибудь подсказать, как это исправить?

Я попытался установить overflow на none, но это удаляет тень. Также я попытался «изменить размер» тени, но это также не помогает.

Answer 1

.card-container {
    width: 260px;
    height: 380px;
    background-position: 50% center;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
  }
  .card-container:hover {
    box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
    z-index: 10;
    -webkit-transform: translateZ(-50px);
    transform: translateZ(-50px);
    -webkit-transition: .3s;
    transition: .3s;
  }
  .card-container:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

<div class="container">
  <div class="row">
    <div class="col-md-4 text-center">
      <!-- One Card Code -->
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
      <!-- One Card Code END -->
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>

Answer 2

создайте тень на .card-container, и вы можете применить overflow:hidden:

.card-container {
    width: 260px;
    height: 380px;
    background-position: 50% center;
    background-size: cover;
    border-radius: 15px;
    overflow:hidden;
  }

  .card-container:hover {
    box-shadow: 0 20px 70px -30px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
    transition: .3s;
  }

<div class="container">
  <div class="row">
    <div class="col-md-4 text-center">
      <!-- One Card Code -->
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-3-944x720-54a0ac93e369fd0ee577012df4f1dcd5da67c281.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
      <!-- One Card Code END -->
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-2-944x720-e9951a49084478d378346e46bdb026c0b989a479.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
    <div class="col-md-4 text-center">
      <div class="card-container" style="background-image:url(https://cdn2.unrealengine.com/Unreal+Engine%2FTeaser-Image-944x720-d7a738407387149cc4e941dd18e9486a0c89bb51.jpg);"
                                  data-tilt=""
                                  data-tilt-glare="true"
                                  data-tilt-max-glare="0.5"
                                  data-tilt-speed="400"
                                  data-tilt-scale="1.08"
                                  data-tilt-max="40"
                                  data-tilt-perspective="500"
                                  style="will-change: transform; transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
                                "></div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.4.1/vanilla-tilt.min.js"></script>