Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
Ruslan Yusupov
@RuslanRS
HTML
CSS
Веб-разработка
Вёрстка
Можно ли наложить прозрачный градиент на img?
Нужно чтоб при наведении на картинку на нее накладывался полупрозрачный цвет. Как это сделать?
Вопрос задан
более трёх лет назад
1443 просмотра
Комментировать
Подписаться
1
Оценить
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
2
Alexander Litvinenko
@edli007
full stack, team lead
Поверх картинки div с прозрачным фоном, при hover фон становиться полупрозрачным градиентом.
Ответ написан
более трёх лет назад
2
комментария
Нравится
2
комментария
Facebook
Вконтакте
Twitter
Ruslan Yusupov
@RuslanRS
Автор вопроса
А как div поверх картинки наложить?
Написано
более трёх лет назад
Максим
@LenovoId
Ruslan Yusupov
:
https://jsfiddle.net/atlanta/rvL7nkwh/
вот так
Написано
более трёх лет назад
Максим Тимофеев
@webinar
Куратор тега Веб-разработка
Учим yii: https://youtu.be/-WRMlGHLgRg
Варианта 2:
1. Обычная картинка, а поверх нее div с абсолютным позиционированием.
2. Вместо картинки svg - как следствие можем ее менять как угодно через css.
Главное понять: накладываем квадрат или надо повторить контур на картинке.
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Пригласить эксперта
Ответы на вопрос
3
Дмитрий
@soledar10
html css3 js jquery
https://jsfiddle.net/soledar10/a2j03cpm/
https://jsfiddle.net/soledar10/91qw5h9e/
Ответ написан
более трёх лет назад
Комментировать
Нравится
2
Комментировать
Facebook
Вконтакте
Twitter
niknamme
@fredaev
Вот хорошая коллекция
imagehover.io
Ответ написан
более трёх лет назад
Комментировать
Нравится
1
Комментировать
Facebook
Вконтакте
Twitter
Сергей Горячев
@webirus
Тыжверстальщик! Наверстай мне упущенное...
https://jsfiddle.net/3cdz1fjh/3/
https://jsfiddle.net/3cdz1fjh/4/
Ответ написан
более трёх лет назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
HTML
Простой
Как сделать на сайте цитаты, как в Telegram?
2 подписчика
4 часа назад
68 просмотров
2
ответа
PHP
+1 ещё
Простой
Как получить id от button?
1 подписчик
8 часов назад
61 просмотр
0
ответов
CSS
Простой
Растягиваются колонки таблицы, при table { width: 100%} и col: { width: 200px }, как исправить это поведение?
1 подписчик
20 часов назад
69 просмотров
2
ответа
Веб-разработка
+1 ещё
Простой
Как авторизоваться через вторую форму в Postman?
1 подписчик
вчера
66 просмотров
0
ответов
HTML
+1 ещё
Средний
Форма ввода с использованием ajax. Не работает на сайте, как исправить?
1 подписчик
вчера
50 просмотров
0
ответов
CSS
Простой
Почему не центрируется текст?
1 подписчик
вчера
123 просмотра
2
ответа
Веб-разработка
+1 ещё
Простой
Регистрация по номеру телефона?
4 подписчика
30 мар.
1398 просмотров
1
ответ
CSS
Простой
Vite при сборке проекта Laravel + React искажает CSS свойства, как решить?
1 подписчик
30 мар.
174 просмотра
0
ответов
JavaScript
+3 ещё
Простой
Как реализовать обновление цены?
1 подписчик
29 мар.
147 просмотров
0
ответов
HTML
+1 ещё
Простой
Почему видеофайл не доступен напрямую в браузере?
1 подписчик
29 мар.
132 просмотра
3
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Специалист технической поддержки ИТ продукта
inSales
от 60 000 ₽
Парсер для сайта
Rotormine
от 10 000 до 100 000 ₽
JavaScript веб-разработчик (Backend)
TurboProject
от 60 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама