引导 4 卡

Posted 2023-03-06

【中文标题】引导 4 卡

【英文标题】：Bootstrap 4 Cards

【发布时间】：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"   />
      <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"  class="card-img-top rounded"    >
                <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"  class="card-img-top rounded"    >
                <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"  class="card-img-top rounded"    >
                <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"  class="card-img-top rounded"    >
                <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;

【参考方案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"   />
          <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"  class="card-img-top rounded"    >
                    <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"  class="card-img-top rounded"    >
                    <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"  class="card-img-top rounded"    >
                    <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"  class="card-img-top rounded"    >
                    <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>