【发布时间】：2022-01-20 05:14:53
【问题描述】：
我是 UI/UX 的初学者，我正在处理一些具有悬停属性的画廊过渡，并在其中添加了引导卡，所以当我悬停在图像上时（之前显示为空白）现在有一个覆盖和显示文本 Intended，以及 Bootstrap 卡片。但问题是在找到解决方案数小时后，我仍然无法使其响应。请帮忙！
这是我使用的 HTML
<div class="gallery mt-5">
<div class="gallery-image">
<img src="Images/Body-Section-2-pic-unsplash.jpg" alt="Not Found" width="100%" height="670px"/>
<div class="gallery-text" >
<h3 style="line-height: 500px;">PASSION FOR THE GAMES, WITH A NEW PERSPECTIVE.</h3>
<div class="container">
<div class="row" style="display: flex;">
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787;">
<img src="Images/Body-Section-2-pic2-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px" >
<div class="card-body">
<h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">ONLY KIDZ ZONE</h5>
<p class="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
<br>
<a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
</div>
</div>
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic3-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px" >
<div class="card-body">
<h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">MEN'S DAY OUT</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
<br>
<a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
</div>
</div>
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic4-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px" >
<div class="card-body">
<h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">LADIES ON THE TRACK</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
<br>
<a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
</div>
</div>
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic5-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px" >
<div class="card-body">
<h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">FAMILIAL AGRESSION</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
<br>
<a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我使用的 CSS
.gallery {
width: 100%;
height: auto;
position: relative;
padding: 0;
margin: 0;
text-align: center;}
.gallery-image{
cursor:pointer;
position: relative;
display: block;}
.gallery-text{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: auto;
text-align: center;
background-color: rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
vertical-align:middle;}
.gallery-text:hover{
opacity: 1;}
.gallery-text h3{
color: white;
font-size: 40px;
font-family: sans-serif;
font-weight: bold;
display: inline-table;
vertical-align:middle;}
【问题讨论】：
标签： css bootstrap-4 responsive-design bootstrap-cards