Наложение оттенка на изображение CSS
 | |
| В статье узнаете про наложение полупрозрачного фона на изображение, где при наведении клика появляется оригинальные цвета картинки с помощью CSS. Этот конкретный запрос функции больше похож на поведение некоторых или всех режимов смешивания, доступных в традиционных редакторах изображений, что включать в себя растворение, затемнение, умножение, наложение и насыщенность. Теперь можно поставить ту палитру цвета на картинку, что соответствует вашему основному дизайну сайта. Так как получается прозрачный фон под заданный оттенком, что при наведении он автоматически будет исчезать. В этой статье изначально предложено несколько решений для имитации оттенка изображения CSS или полупрозрачного наложения цветов, что ставится самостоятельно. 6 решений для имитации оттенка изображенияПриступаем к установке: HTML Код <div class="lantudsad-kopegtub"> <figure class="kexadetulob"> <img src="Изображение под номером 1.jpg" alt="" width="530" height="375" /> </figure> <figure class="kexadetulob tugabas2"> <img src="Изображение под номером 2.jpg" alt="" width="530" height="375" /> </figure> <figure class="kexadetulob tugabas3"> <img src="Изображение под номером 3.jpg" alt="" width="530" height="375" /> </figure> <figure class="kexadetulob tugabas4"> <img src="Изображение под номером 4.jpg" alt="" width="530" height="375" /> </figure> <figure class="kexadetulob tugabas5"> <img src="Изображение под номером 5.jpg" alt="" width="530" height="375" /> </figure> <figure class="kexadetulob tugabas6"> <img src="Изображение под номером 6.jpg" alt="" width="530" height="375" /> </figure> </div> CSS Код .lantudsad-kopegtub { overflow: hidden; width: 853px; margin: 0 auto; } .kexadetulob { position: relative; float: left; margin-right: 15px; margin-bottom: 15px; cursor: pointer; box-shadow: rgba(8, 8, 8, 0.2) 3px 5px 5px; } .kexadetulob:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(7, 241, 241, 0.5); transition: all .5s linear; } .kexadetulob:hover:before { background: none; } .tugabas2:before { background: rgba(16, 16, 241, 0.5); } .tugabas3:before { background: rgba(17, 17, 226, 0.5); } .tugabas4:before { background: rgba(61, 140, 241, 0.5); } .tugabas5:before { background: rgba(236, 16, 224, 0.5); } .tugabas6:before { background: rgba(218, 50, 10, 0.6); } Плюс в том, что каждое из этих решений имеет имеет свои плюсы, хотя все они идентичны, то также их связывает одно, здесь нм не нужно подключать JavaScript, так как для функциональности и для эффекта он не требуется. Отличная подборка вещей, которая можете выполняется с помощью псевдоэлементов, и может казаться бесконечной, что помогает в чистом примере CSS с оттенком изображения. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |