将鼠标悬停在图像上时如何将按钮显示为效果？

【问题标题】：How to show a button as effect while hovering over an image?将鼠标悬停在图像上时如何将按钮显示为效果？
【发布时间】：2021-07-05 19:04:45
【问题描述】：

我的网页中有一张图片（班级照片）和一个名为“添加到购物车”的按钮（班级 btn）。我希望它能够工作，当有人将鼠标悬停在产品图像上时，“添加到购物车”按钮开始显示在图像上，而图像的不透明度会降低一点。当我将鼠标悬停在图像上时，我无法弄清楚如何使按钮出现。我对网络开发很陌生，所以请帮忙。当鼠标悬停在图像上时，我在 css 中写了什么，以便按钮仅在图像顶部可见。

    <div>
        <img class="Photo">
        <button class= "btn">
    <div>
    <style>
        .btn:hover{
        }
    <style

【问题讨论】：

请至少发布一个代码sn-p

标签： html css button hover web-frontend

【解决方案1】：

为了连接图像 (class="photo") 和按钮 (class="btn")，您需要某种形式的容器（例如，div 元素和 class="container"）包含两者。

然后可以使用transition css 属性，来做不透明度的平滑切换：

.btn {
  display: none;
}

.container:hover .btn {
  display: inline-block;
  position: absolute;
}

.container:hover .photo {
  opacity: 0.5;
  transition: 0.3s;
}

【讨论】：