Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус метода в том, что изображение элемента задаётся только через CSS background.
HTML
<h3>Оригинал</h3>
<a href="#" class="image-original"></a>
<h3>С наложенным градиентом</h3>
<a href="#" class="image-gradient"></a>CSS
.image-original {
width:650px;
height:427px;
background: url(/img.jpg) 0 0 no-repeat;
background-size: cover;
}
.image-gradient {
width: 650px;
height: 427px;
background:
linear-gradient(to left, #6b2f64, #a24f4f),
url(/img.jpg) 0 0 no-repeat;
background-blend-mode: screen;
background-size: cover;
}.image-gradient {
width: 650px;
height: 427px;
background:
url(/img.jpg) 0 0 no-repeat;
background-size: cover;
}
.image-gradient:hover {
background:
linear-gradient(to left, #6b2f64, #a24f4f),
url(/img.jpg) 0 0 no-repeat;
background-blend-mode: screen;
background-size: cover;
}Оригинал при наведении
.image-gradient {
width: 650px;
height: 427px;
background:
linear-gradient(to left, #6b2f64, #a24f4f),
url(/img.jpg) 0 0 no-repeat;
background-blend-mode: screen;
background-size: cover;
}
.image-gradient:hover {
background: url(/img.jpg) 0 0 no-repeat;
background-size: cover;
}Увы, при таком методе не работает плавная смена изображения с помощью transition.
