如何在图像悬停时创建深色淡入淡出+文字？答案

【问题标题】：How to create a dark fade + text on image hover?如何在图像悬停时创建深色淡入淡出+文字？
【发布时间】：2019-03-04 21:06:01
【问题描述】：

在尝试获得某种效果时遇到问题：

我有一张图片。我想悬停在它上面。它应该会变黑并弹出一些文本。

例子^

最简单/最简单的设置是什么？最好只有 HTML 和 CSS

注意：该元素需要在 CSS 中设置 background-image。

    .thumbnail {
    background-image: url(potato.jpeg);
    height: 400px;
    width: 450px;
}

.thumbnail:hover {
    background: rgb(0, 0, 0);
    height: 400px;
    width: 450px;
    opacity: 0.5;
    transition: 0.8s;
}

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="thumbnail"> </div>

</body>

</html>

【问题讨论】：

请将您的代码添加到您的问题中，向我们展示您的尝试
使用类似stackoverflow.com/questions/29608381/caption-overlay-on-hover
签出 :hover、背景过渡和文本、子 div 或 :after:hover 内容
Caption overlay on hover的可能重复

标签： html css opacity

【解决方案1】：

您应该为叠加层使用单独的元素，在我的示例中是子元素。由于opacity: 0，只有悬停状态可见，常规状态不可见

.thumbnail {
  background-image: url(https://placehold.it/450x400/fa0);
  height: 400px;
  width: 450px;
}
.overlay {
  background: rgb(0, 0, 0);
  height: 400px;
  width: 450px;
  opacity: 0;
  transition: 0.8s;
}
.thumbnail:hover .overlay {
  opacity: 0.5;
}

&lt;div class="thumbnail"&gt;&lt;div class="overlay"&gt; &lt;/div&gt; &lt;/div&gt;

当涉及到完全不透明的文本时，它会变得有点复杂：在下面的例子中，覆盖元素有一个半透明的背景颜色，当父元素悬停时得到opacity: 1。这样文本在悬停时没有不透明度，但由于其自身的不透明度设置为 0.5，背景仍然具有：

.thumbnail {
  background-image: url(https://placehold.it/450x400/fa0);
  height: 400px;
  width: 450px;
}
.overlay {
  background: rgba(0, 0, 0, 0.5);
  height: 400px;
  width: 450px;
  opacity: 0;
  transition: 0.8s;
  font-size: 36px;
  color: #fff;
}
.overlay:hover {
  opacity: 1;
}

&lt;div class="thumbnail"&gt;&lt;div class="overlay"&gt;SOME TEXT&lt;/div&gt;&lt;/div&gt;

【讨论】：

它不仅是第二个类，而且是包含另一个背景和文本的第二个元素。
是的，在这种情况下（在其他特定情况下我不会那样做）-我在第二个 sn-p 中相应地更改了它
您可以添加更多子元素并将position: absolute 应用于它们（并将position: relative 应用于父元素。然后您可以使用top、bottom、left 和right 参数定位它们。z-index 确定具有相同父元素的绝对定位元素之间的堆叠顺序。