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>

显示隐藏图像悬停在Bootstrap 4.2上

1 个答案: