如何在图像悬停时创建深色淡入淡出 + 文本？
用户10340803
尝试获得某种效果时遇到麻烦：
我有一个图像。我想悬停在它上面。它应该变黑并弹出一些文本。
例子^
最简单/最简单的设置是什么？最好只有 HTML 和 CSS
注意：该元素需要background-image在 CSS 中设置。
.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>
约翰内斯
您应该为覆盖层使用单独的元素，在我的示例中是一个子元素。只有悬停状态可见，常规状态不可见，因为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;
}<div class="thumbnail"><div class="overlay"> </div> </div>当涉及完全没有不透明度的文本时，它变得有点复杂：在下面的示例中，覆盖元素具有半透明的背景颜色，并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;
}<div class="thumbnail"><div class="overlay">SOME TEXT</div></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
悬停图像时CSS淡入淡出过渡为块文本吗？
- 2
如何使文本淡入淡出
- 3
CSS：如何淡入淡出文本？
- 4
如何在悬停时使图像淡入淡出？
- 5
jQuery文本淡入淡出
- 6
使用jquery .hover时淡入淡出文本
- 7
如何在 asp.NET/css 中淡入淡出文本
- 8
如何仅使div而不是文本淡入淡出？
- 9
在悬停和单击上如何淡出图像和淡入内容文本
- 10
Javascript：文本更改之间的文本淡入淡出？
- 11
仅使用css的文本淡入淡出与多个文本块
- 12
如何淡出图像并淡入具有文本的另一图像？
- 13
如何为文本中的每个单词添加淡入淡出动画
- 14
如何使用纯JavaScript和CSS在动态更改文本中添加淡入淡出动画？
- 15
您如何编程在Unity中使用淡入淡出的文本（使用c＃）？
- 16
如何使用带有按钮的 JavaScript 淡入淡出文本
- 17
在javascript中更改文本时如何添加淡入和淡出
- 18
如何在循环中淡入和淡出文本
- 19
SKLabelNode的淡入淡出动画更改文本
- 20
SwiftUI-使用淡入淡出动画更改文本
- 21
SKLabelNode的淡入淡出动画更改文本
- 22
如何使用jQuery和CSS创建图像悬停淡入淡出效果？
- 23
将鼠标悬停在图像上时如何切换淡入淡出DIV
- 24
将鼠标悬停在文本上，图像淡入和淡出
- 25
如何在悬停时自动向图像添加文本
- 26
使用CSS将淡入淡出的文本滚动到图像中-差不多在这里
- 27
如何在悬停时同时使照片模糊和淡入文本（jQuery或CSS）
- 28
如何在文本悬停时创建一行？
- 29
如何实现淡入/淡出更改文本行？
我来说两句