Полупрозрачный градиент поверх картинки

Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.

Вариации градиентов можно посмотреть в статье «Сборник градиентов».

<a class="gradient" href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
HTML
.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;
}
CSS

У родителя остается свободным псевдоэлемент :before, c помощью него наложим иконку по центру картинки.

<a class="gradient" href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
HTML
.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;
}
CSS
<a class="gradient" href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
HTML
.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;
}
CSS
<a class="gradient" href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
HTML
.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;
}
CSS

Для галереи рассмотренной в предыдущей статье, добавим данный эффект.

<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>
HTML
.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;
}
CSS
13.02.2019, обновлено 25.10.2019
32913

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
19725
+1
CSS фильтры
CSS3-свойство filter позволяет применить фильтры к элементам, с помощью них можно инвертировать цвета, осветлить или затемнить элементы.
2673
+1
Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
3527
0
Выравнивание блока по центру родителя
Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.
11077
+3
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
4504
+2
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
147281
+8