Изменить яркость изображения с текстом при наведении - PullRequest
Новая
       11

Изменить яркость изображения с текстом при наведении

0 голосов
/ 25 октября 2018

У меня есть несколько изображений с текстом на них.Я хочу изменить яркость изображений при наведении, не затрагивая текст.

Решение, которое у меня сейчас есть, работает, за исключением одной проблемы: когда курсор перемещается над изображением, яркость меняется, но если курсорзатем перемещается по тексту в верхней части изображения, яркость меняется обратно.

Как этого избежать?Я ищу чистое решение CSS, если это возможно. 

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}
.image-container img {
  filter: brightness(60%);
  width: 100%;
}
.image-container img:hover {
  filter: brightness(100%);
}
.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
}
<div class="image-container">
<p><a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
<span class="image-text">Master</span><br>
</a></p>
</div>

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Запустить изменение при наведении на контейнер вместо изображения. 

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}

.image-container img {
  filter: brightness(60%);
  width: 100%;
}

.image-container:hover img {
  filter: brightness(100%);
}

.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
}
<div class="image-container">
  <p>
    <a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
      <span class="image-text">Master</span><br>
    </a>
  </p>
</div>
0 голосов
/ 25 октября 2018

Вы можете добавить pointer-events:none, чтобы игнорировать событие наведения на текст 

.image-container {
  position: relative;
  text-align: center;
  width: 50%;
}
.image-container img {
  filter: brightness(60%);
  width: 100%;
}
.image-container img:hover {
  filter: brightness(100%);
}
.image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
  font-size: 3.5vw;
  pointer-events:none
}
<div class="image-container">
<p><a href="/distancer/master/"><img src="https://yacs.dk/wp-content/uploads/2016/09/Yeti_AR2_016-652-1.jpg"><br>
<span class="image-text">Master</span><br>
</a></p>
</div>
...