Bootstrap 4 张牌

Question

我是 UI/UX 的初学者，我对一些具有悬停属性的画廊过渡感到不安，并在其中添加了 Bootstrap 卡片，所以当我将鼠标悬停在图像上时（出现之前为空白）现在有一个叠加层并显示 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;}

Answer 1

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;
    display: flex;
    justify-content: center;
    align-items: center;}

    .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;}

    .card{
    margin: 5% 0%;}
      
    .card-body{
    margin: 0% 0% 0% 3%;
    padding: 6% 0%;}

    @media screen and (max-width: 350px) {
    .card {
     width: 100% !important;}}

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>PASSION FOR THE GAMES, WITH A NEW PERSPECTIVE.</h3>       
        </div>   
        </div> 
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                <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>

            <div class="col-xs-12 col-sm-6 col-md-4">
                <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>
                <div class="col-xs-12 col-sm-6 col-md-4">
                <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>
                <div class="col-xs-12 col-sm-6 col-md-4">
                <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>

Bootstrap 4 张牌

Bootstrap 4 Cards

css

responsive-design

bootstrap-4

bootstrap-cards