问题:
I have a gallery section of cards using Bootstrap 4 and would like user to hover over each card to have an overlay slide / or fade in but only cover the image. As of now it...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I have a gallery section of cards using Bootstrap 4 and would like user to hover over each card to have an overlay slide / or fade in but only cover the image. As of now it slides on over the whole card.
I can't seem to get it to just fit the card. I know as of now I have the width
and height
set to 100% which covers the whole card but when I remove that the overlay is small and slides in over the gap between image and border. Any ideas?
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;
}
回答1:
Add position: relative
to the wrapper of the image (now the overlay
is relative to the card
and that's why you have it over the whole card) - see demo below:
.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>