gpt4 book ai didi

html - 如何在图像悬停时创建深色淡入淡出+文字?

转载 作者:行者123 更新时间:2023-11-28 17:01:43 27 4
gpt4 key购买 nike

在尝试获得某种效果时遇到困难:

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

Here is an example

例子^

执行此操作最简单/最简单的设置是什么?最好只有 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>

最佳答案

您应该为叠加层使用一个单独的元素,在我的示例中是一个子元素。由于 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 parent 悬停。这样文本在悬停时没有不透明度,但由于其自身的不透明度设置为 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>

关于html - 如何在图像悬停时创建深色淡入淡出+文字?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52562579/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com