Ставим прозрачный градиент на фото

Для красивых эффектов при создании сайтов можно использовать полупрозрачные градиенты при наведении курсора на картинку.

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

Разные варианты CSS градиентов можно посмотреть в статье: Сборник CSS градиентов.

Пример прозрачного градиента

CSS код полупрозрачного градиента

HTML код с использованием полупрозрачного градиента

Дополнение иконкой

У родителя остается свободным псевдоэлемент :before, c помощью него наложим иконку по центру картинки.

CSS код полупрозрачного градиента

HTML код с использованием полупрозрачного градиента

Градиент при наведении курсора

CSS код полупрозрачного градиента

HTML код с использованием полупрозрачного градиента

Плавное появление

CSS код полупрозрачного градиента

HTML код с использованием полупрозрачного градиента