鼠标悬停时显示/隐藏图像叠加层 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>

使用显示属性是否可以做到？这样我就能使用响应式类了，因为我不想在移动设备上出现悬停效果。

我在Bootstrap 4.2中找不到opacity类了，是不是已经废弃了？

- meez

---

在移动设备上，当您单击图像时，会显示悬停效果..您也想删除它吗？ - Xenio Gracias

你可以使用媒体查询覆盖任何CSS属性。你有什么问题？ - Mike Doe

在w3schools上查看一些示例：https://www.w3schools.com/howto/howto_css_image_overlay.asp。要在移动设备上隐藏叠加层，请尝试以下内容：@media (max-width: 768px) { .overlay { display: none;} } - Αntonis Papadakis

@emix 我知道我可以使用自定义CSS进行覆盖，但是我想知道是否有一种Bootstrap的方法来实现？至于Bootstrap 4.2中的fade effect，它是用来做什么的？ - meez

我通过编写自定义CSS与Bootstrap卡片相结合来修复它。 - meez

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>

- Umesh