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

13.02.2019

56222

Такой эффект можно сделать с помощью :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