Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.
Вариации градиентов можно посмотреть в статье «Сборник градиентов».
Пример
Дополнение иконкой
У родителя остается свободным псевдоэлемент :before, c помощью него наложим иконку по центру картинки.
Градиент при наведении курсора
Плавное появление
Применение в галереи
Для галереи рассмотренной в предыдущей статье, добавим данный эффект.
не кросбраухено, ну и хрен с ним
а что у вас с гуглом?
именно, что такой элемент должен на всех браузерах и устройствах выглядеть эффективно, а иначе косяк
а гугол предложил пару скриптов, по цветоградиентам по тексту — тоже не решение, так как нужна прозрачность
Представьте: 1. на весь фон — картинка; 2. на весь фон — градиент
А можно ли это смешать? Допустим, что бы была фоновая картинка, а поверх нее слабый полупрозрачный градиент, скажем сверху (255,255,255.0,6), а с низу (255,255,255.0,4). Так можно сделать? Сам пробовал и писать этот градиент, и гуглить.. вообщем самоделкин из меня никакой. Может кто посоветовать решение? (Ну если такое возможно)
2 ответа 2
Вот такой вариант есть: пример Точно работает в IE 10+ и последних версиях Firefox/Opera/Chrome
Делается такое с помощью обычного градиента:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.
Связанные
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459