Блог

Главная - Вопросы по программированию - Как я могу добавить прозрачный цвет к изображению при наведении на него курсора мыши?

Как я могу добавить прозрачный цвет к изображению при наведении на него курсора мыши?

#html #css

#HTML #css — файл

Вопрос:

Я хочу, чтобы при наведении курсора мыши на изображение оно приобретало белый блеск, я бы сделал это с помощью rgba, но я не знаю, как добавить цвет к изображению с помощью css в первую очередь. Я бы подумал, что это как-то возможно? Или, бьюсь об заклад, есть какой-то способ заставить это работать?

Заранее благодарю вас за любую помощь!

Комментарии:

1. Ознакомьтесь с псевдоэлементами , такими как ::before и ::after : developer.mozilla.org/en-US/docs/Web/CSS/::after Вам нужно будет присвоить ::after псевдоэлементу пару атрибутов, таких как: content:''; display: block; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.4);

Ответ №1:

Обычно я делаю это так:

(красный фон здесь для подделки изображения, потому что я не могу загрузить его во фрагмент ofc. просто представьте, что изображение представляет собой красный квадрат)

 .picture-container {
  /*Position absolute will refer to the last Parent-Element with a set Position */
  position: relative;
  height: 500px;
  width: 500px;
}

.picture{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /*just to make it visible, imagine it's a red square picture*/
  background-color: red;
  z-index: 6;
  cursor: pointer;
}
.picture:hover{
  z-index: 4;
}

.picture-overlay{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.5);
  height: 100%;
  width: 100%;
  z-index: 5;
  /*pointer-events: none keeps the Picture clickable etc even when the div is above it*/
  pointer-events: none;
}  
 <div class="picture-container">
   <img class="picture" src="">
   <div class="picture-overlay"></div>
</div>