Как сделать затемнение другим цветом, при наведении на фото? [дубликат]
Мне нужно сделать так, чтобы когда я наводил на фотографию — появлялась стрелочка и фото покрывалось другим цветом с прозрачностью (фото прикрепил ниже). Уже сломал голову, гуглил, спрашивал, но так и не нашел ответ. Очень надеюсь на вашу помощь! Спрашивал похожий вопрос, но он был про затемнение, из-за чего и отметил тот вопрос отмеченным. Код сейчас:
.collection__menu < align-items: center; display: flex; >.collection__item < text-align: center; >.collection__img < margin-top: 85px; display: block; cursor: pointer; >.collection__subtitle < font-weight: 500; font-size: 20px; margin-top: 27px; margin-bottom: 7px; >.collection__sale < color: #9C9C9C; text-decoration-line: line-through; font-size: 15px; letter-spacing: 0.02em; margin-right: 10px; >.collection__price
То, как должно быть:
Как при наведении на картинку сделать эффект затемнения?
Как при наведении на картинку сделать эффект затемнения с иконкой из картинки png в середине?
Пример на картинке.
- Вопрос задан более трёх лет назад
- 67502 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 7
HamSter @HamSter007
HTML/CSS верстальщик
Стандартно же, на любом сайте можно посмотреть реализацию.
Обертка или ссылка, внутри изображение:
дальше используются псевдоэлементы:
a < display: block; position: relative; >a:after < content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; >a:before < content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(icon-path); opacity: 0; >a:hover:before, a:hover:after
Второй вариант (больше подходит если вн. есть еще и текст описание):
Стили примерно те же:
a < display: block; position: relative; >.mask < position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); opacity: 0; >a:hover:after
Ответ написан более трёх лет назад
Нравится 8 1 комментарий
Просто накинуть фон можно и свойством filter , но задача была добавить и изображение и текст.
При том они должны появляется плавно через transition .
Спасибо — хороший вариант! Буду использовать как основной.
PS: К a:before с изображением обязательно добавьте z-index: 1
Курсы javascript
Пишу веб-приложение, в котором требуется затемнять некоторые изображения. До этого справлялся тем, что фон под изображениями был тёмным, и изображения затемнялись прописыванием им opacity<1. Но сейчас столкнулся с тем, что затемнённые изображения могут перекрывать друг друга, и, если продолжать использовать этот метод для затемнения, изображения просвечивают сквозь друг друга.
Подскажите способ затемнить изображение с помощью стилей, желательно без создания дополнительных элементов.
Вариант перекрывать изображения полупрозрачным чёрным div’ом не подходит. Нарисовать каждое изображение в двух вариантах — тёмном и нормальном — тоже не подходит.
Гугл не помог, последняя надежда на вас.
Разметка
Разметка довольно простая: включается в себя бокс и изображение внутри него. Бокс выступает в роли контейнера и не позволяет картинке выйти на пределы при увеличении.
Стили
Комментарии даны в коде.
.box < width: 600px; /* ширина бокса */ height: 500px; /* высота бокса */ position: relative; /* размещаем относительно бокса */ overflow: hidden; /* все что выходит за границы - скрываем */ border: 3px solid #fff; >.picture < width: 100%; height: 100%; position: absolute; object-fit: cover; /* адаптариуем картинку под бокс */ transition: 0.2s; /* для плавности анимации */ >.box:hover .picture < transform: scale(1.15); /* увеличиваем картинку при наведении */ >