#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>