在悬停时显示隐藏图像叠加 Bootstrap 4.2

Posted 2023-03-05

【中文标题】在悬停时显示隐藏图像叠加 Bootstrap 4.2

【英文标题】：Show hide Image overlay on hover Bootstrap 4.2

【发布时间】：2019-06-15 14:32:37

【问题描述】：

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

我的 html 结构将是：

<div class="card bg-dark text-white">
  <img src="..." class="card-img" >
  <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 可以吗？所以我可以使用响应式课程。因为我不想在移动设备上出现悬停效果。

我在Bootstrap 4.2. 中找不到opacity 类了吗？

【问题讨论】：

在移动设备上单击图像时会显示悬停效果..您还想删除它吗？？

您始终可以使用媒体查询覆盖任何 CSS 属性。你有什么问题？

查看 w3schools 上的一些示例：w3schools.com/howto/howto_css_image_overlay.asp。要在移动设备上隐藏叠加层，请尝试以下操作：@media (max-width: 768px) .overlay display: none;

@emix 我知道我可以用自定义 CSS 覆盖，但我想也许有一种 Bootstrap 方法可以做到这一点？那么 Bootstrap 4.2 中的 fade effect 又是干什么用的呢？

提供所有与问题相关的代码。

【参考方案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" >
  <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>