Слайд карты накладывается только на изображение?

Question

У меня есть раздел карт с использованием Bootstrap 4, и я хотел бы, чтобы пользователь наводил курсор на каждую карту, чтобы наложение слайда / или исчезало, но только покрывало изображение.На данный момент он скользит по всей карте.

Кажется, я не могу понять, что он подходит к карте.На данный момент я знаю, что для width и height установлено значение 100%, которое покрывает всю карту, но когда я удаляю это наложение, оно становится маленьким и скользит по промежутку между изображением и границей.Есть идеи?

HTML одной из карточек:

<div class="card mt-6">
  <div class="px-3">
    <div class="card-overlay">
      <h1 class="card-overlay-heading">Meet Brian!</h1>
      <script src="https://fast.wistia.com/embed/medias/.jsonp" async></script>
      <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
      <span class="wistia_embed wistia_async_ popover=true popoverContent=link" style="display:inline;position:relative">
                                        <a href="#"><i class="fas fa-play"></i></a></span>
    </div>
    <img src="images/Lorraine.png" class="card-img" alt="">
  </div>
  <div class="card-body">
    <h6 class="card-title mb-0 text-uppercase">Mark D</h6>
    <p class="card-text mb-3  text-green fw-bold">Web</p>
  </div>
</div>

CSS:

.card {
  position: relative;
  overflow: hidden;
}

.card:hover .card-overlay {
  left: 0;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  background-color: rgba(85, 211, 150, 0.6);
  color: #fff;
  height: 100%;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: left .7s;
}

Answer 1

Добавьте position: relative к обёртке изображения (теперь overlay равно относительно к card, и поэтому у вас есть это для всей карты) -см. демонстрацию ниже:

.card {
  position: relative;
  overflow: hidden;
}
.card > div { /* ADDED THIS */
  position: relative;
}

.card:hover .card-overlay {
  left: 0;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  background-color: rgba(85, 211, 150, 0.6);
  color: #fff;
  height: 100%;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: left .7s;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="card mt-6" style="width:300px">
    <div class="px-3">
      <div class="card-overlay">
        <h1 class="card-overlay-heading">Meet Brian!</h1>
        <span class="wistia_embed wistia_async_ popover=true popoverContent=link" style="display:inline;position:relative">
                                    <a href="#"><i class="fas fa-play"></i></a></span>
      </div>
      <img src="https://via.placeholder.com/50" class="card-img" alt="">
    </div>
    <div class="card-body">
      <h6 class="card-title mb-0 text-uppercase">Mark D</h6>
      <p class="card-text mb-3  text-green fw-bold">Web</p>
    </div>
  </div>
</div>