Html 在悬停引导4.2上显示隐藏图像覆盖

我使用的是

bootstrap4.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>

卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

有可能吗？所以我可以使用响应类。因为我不想在手机上出现悬停效果

---

在

bootstrap4.2.

中我再也找不到

opacity

类了。

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

.uvs{
位置：相对位置；
宽度：300px；
}
.卡img{
显示：块；
宽度：100%；
高度：自动；
}
.卡img覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；颜色：#fff；
}
.uvs:hover.card img覆盖{
不透明度：1；
}.卡UV{位置：绝对；
排名前10%；
左：20%；-webkit转换：translate（-10%，-10%）；
-ms转换：翻译（-10%，-10%）；
转换：转换（-10%，-10%）；}

卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

在移动设备上，单击图像时会显示悬停效果。。您想删除它吗？您可以使用媒体查询覆盖任何css属性。你的问题是什么？请查看w3schools上的一些示例：。要在移动设备上隐藏覆盖，请尝试以下操作：@media（最大宽度：768px）{.overlay{display:none；}}}@emix我知道我可以用自定义CSS覆盖，但我想也许有一种引导方法可以做到这一点？那么Bootstrap 4.2中的淡入淡出效果是什么呢？请提供与该问题相关的所有代码。