html - 在悬停 Bootstrap 4.2 上显示隐藏图像叠加

Question

我正在使用 Bootstrap 4.2.显示和隐藏具有平滑过渡的图像叠加层的首选方法是什么。

我的 HTML 结构将是:

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

是否可以使用 Display properties ?所以我可以使用响应式类。因为我不想在移动设备上出现悬停效果。

我找不到 opacity不再上课 Bootstrap 4.2. ?

Answer 1

我是使用简单的 css 和 html 代码在代码中显示和隐藏具有平滑过渡的图像覆盖的首选方法。

.uvs {
  position: relative;
  width: 300px;
}
.card-img {
  display: block;
  width: 100%;
  height: auto;
}
.card-img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;color:#fff;
}
.uvs:hover .card-img-overlay {  
  opacity: 1;
}  .card-uvs{ position: absolute;
  top:10%;
  left:20%; -webkit-transform: translate(-10%, -10%);
  -ms-transform: translate(-10%, -10%);
  transform: translate(-10%, -10%);}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
 <div class="uvs"> <div class="card bg-dark text-white">
  <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="card-img" alt="...">
  <div class="card-img-overlay"> <div class="card-uvs">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>  </div>
</div></div>