Как создать темный эффект исчезновения + текст при наведении изображения? - PullRequest
Новая
       14

Как создать темный эффект исчезновения + текст при наведении изображения?

0 голосов
/ 28 сентября 2018

Возникли проблемы при попытке получить определенный эффект:

У меня есть изображение.Я хочу парить над этим.Он должен стать немного черным и всплывающим текстом.

Here is an example

пример ^

Какая самая простая / простая настройкаэтот?Желательно только 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>

1 Ответ

0 голосов
/ 29 сентября 2018

Вы должны использовать отдельный элемент для наложения, в моем примере дочерний элемент.Виден только статус при наведении, обычный статус - нет, из-за 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>
...