Полупрозрачный градиент поверх картинки

Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.

Вариации градиентов можно посмотреть в статье «Сборник градиентов».

13.02.2019, обновлено 25.10.2019
16914

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
7655
+1
CSS фильтры
CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы.
1251
0
Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
1663
-1
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
5005
+1
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
282
0
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
92601
+6