» »

Наложение оттенка на изображение CSS

Наложение оттенка на изображение 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 с оттенком изображения.

Демонстрация
2019-05-03 Загрузок: 1 Просмотров: 425 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar