Аккордеон изображений для сайта на CSS3

Наверное каждому из веб-разработчиков приходилось сталкиваться с аккордеонами изображений, весьма хитрый ход позволяет стилизовать сайт изображениями, при этом сэкономив уйму места, и привлекая при этом пользователей интересным решением анимации, в данном уроке мы рассмотрим достаточно простой способ реализации аккордеона изображений для сайта с помощью CSS. Такой вариант решения может стать отличным началом приветствия вашего сайта, где пользователю нужно сделать основной выбор. Давайте посмотрим, что у нас получилось.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Идея состоит в том, что у нас есть пять изображений, мы выстраиваем их в ряд, затем добавляем подписи, последним шагом будет подключение увеличения изображений так, чтобы остальные немного изменяли свой размер. И так, давайте приступим.

Шаг 1. HTML

Разметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в пространстве:

</div>

Как вы поняли ничего сложного нет, все это мы обвернули в общий класс, который будет группировать и позиционировать наш аккордеон.

Аккордеон изображений для сайта с помощью CSS3

Шаг 2. CSS

Теперь нам необходимо, для начала, определить общие параметры контейнера, с указанным его позиционированием, затем мы указываем процентное соотношение для каждого блока:

.wrapper {

display: flex;

flex-direction: row;

align-items: stretch;

height: 100%;

.item {

display: flex;

flex-grow: 1;

transition: all .5s ease;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

overflow: hidden;

&:hover {

flex-grow: 4;

box-shadow: inset 0 0 20px #000;

}

&:after {

content: "";

width: 200%;

height: 43.33%;

background-color: rgba(#000, 0.75);

left: -50%;

bottom: -10%;

position: absolute;

transform: rotate(-15deg);

color: #fff;

text-align: center;

padding-top: 20px;

text-transform: uppercase;

font-size: 40px;

font-family: 'Raleway';

font-weight: 100;

}

&.ryze {

background-position: 70% center;

&:after {

content: "Ryze";

}

&.irelia {

background-position: 45% center;

&:after {

content: "Irelia";

}

&.jinx {

background-position: 70% center;

&:after {

content: "Jinx";

}

&.katarina {

background-position: 70% center;

&:after {

content: "Katarina";

}

&.ziggs {

background-position: 75% center;

&:after {

content: "Ziggs";

}

Так как подписи были убраны из разметки мы перенесли их в стили. Такой простой способ поможет с легкостью внедрить аккордеон в структуру Вашего проекта.