Как сделать на CSS окрашивание картинки с нужной стороны для текста?

Question

Вот пример https://www.domovenok.ru/, первый баннер. Как закрасить картинку при помощи CSS под текстом??

Answer 1

Я лично делаю такие градиенты в Figma, потом просто копирую свойство background в свой проект.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.banner {
  width: 500px;
  position: relative;
}
.banner img {
  width: 100%;
}
.fade {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(
    89.46deg,
    #c4c4c4 22.5%,
    rgba(196, 196, 196, 0.26) 83.48%
  );
}

<div class="banner">
  <img src="https://images.unsplash.com/photo-1599413720280-1beeb76ff93a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="">
  <div class="fade"></div>
</div>

БЛОГ НА HUSL

Как сделать на CSS окрашивание картинки с нужной стороны для текста?

Ответы (1 шт):