I am trying to create a gallery section of cards using Bootstrap 4 where I want the user to hover over each card and have an overlay slide or fade in, covering only the image. Currently, the overlay slides in over the entire card instead.
I have been struggling to make the overlay fit just the card. Right now, when I set the width and height to 100%, it covers the entire card, but if I remove that, the overlay becomes small and slides in over the gap between the image and the border. Any suggestions on how to achieve this?
Here is the HTML of one of the cards:
<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;
}