Такой эффект можно сделать с помощью :before
у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.
Вариации градиентов можно посмотреть в статье «Сборник градиентов».
Пример
.gradient {
display: inline-block;
position: relative;
line-height: 0;
}
.gradient:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;
background-image: linear-gradient(to left, #11de93, #0e7ad6);
opacity: 0.8;
}
У родителя остается свободным псевдоэлемент :before,
c помощью него наложим иконку по центру картинки.
.gradient {
display: inline-block;
position: relative;
line-height: 0;
}
.gradient:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;
background-image: linear-gradient(to left, #11de93, #0e7ad6);
opacity: 0.8;
}
.gradient:before {
content: "";
display: inline-block;
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
background: url(https://snipp.ru/img/plus.png) 0 0 no-repeat;
}
.gradient {
display: inline-block;
position: relative;
line-height: 0;
}
.gradient:hover:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;
background-image: linear-gradient(to left, #11de93, #0e7ad6);
opacity: 0.8;
}
.gradient:hover:before {
content: "";
display: inline-block;
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
position: absolute;
top: 50%;
left: 50%;
background: url(https://snipp.ru/img/plus.png) 0 0 no-repeat;
z-index: 100;
}
.gradient {
display: inline-block;
position: relative;
line-height: 0;
}
.gradient:after {
content: "";
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.gradient:hover:after {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;
background-image: linear-gradient(to left, #11de93, #0e7ad6);
opacity: 0.8;
}
.gradient:before {
content: "";
opacity: 0;
transition: opacity 0.5s;
}
.gradient:hover:before {
display: inline-block;
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
background: url(https://snipp.ru/img/plus.png) 0 0 no-repeat;
opacity: 1;
}
Для галереи рассмотренной в предыдущей статье, добавим данный эффект.
<div class="photos">
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
</div>
.photos {
margin: 0 0 20px 0;
overflow: hidden;
text-align: center;
}
.photos a {
display: block;
width: 50%;
float: left;
position: relative;
line-height: 0;
}
.photos a:after {
content: "";
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.photos a:hover:after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: transparent;
background-image: linear-gradient(to left, #11de93, #0e7ad6);
opacity: 0.8;
}
.photos a:before {
content: "";
opacity: 0;
transition: opacity 0.5s;
}
.photos a:hover:before {
display: inline-block;
width: 52px;
height: 52px;
position: absolute;
top: 50%;
left: 50%;
margin: -26px 0 0 -26px;
z-index: 100;
background: url(https://snipp.ru/img/plus.png) 0 0 no-repeat;
opacity: 1;
}
.photos img {
width: 100%;
height: auto;
}