HTML/CSS

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

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

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

1

Пример

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

Дополнение иконкой

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

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

Градиент при наведении курсора

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

Плавное появление

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

Применение в галереи

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

<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;
}
13 февраля 2019
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.