如何在图像悬停时创建暗淡+文字?

时间:2018-09-28 20:56:08

标签: html css css3 opacity

尝试获得一定的效果时遇到麻烦:

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

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>

1 个答案:

答案 0 :(得分: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;
}
<div class="thumbnail"><div class="overlay"> </div> </div>

当涉及文本时,它会变得更加复杂,而文本完全不应该具有不透明性:在下面的示例中,overlay元素具有半透明的背景色,并且在父元素悬停时得到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>