Идея состоит в том, что у нас есть пять изображений, мы выстраиваем их в ряд, затем добавляем подписи, последним шагом будет подключение
увеличения изображений так, чтобы остальные немного изменяли свой
размер. И так, давайте приступим.
Шаг 1. HTML
Разметка будет очень простой, нам необходимо вывести пять классов, каждый из которых отвечает за свое изображение и его позиционирование в
пространстве:Код
<div class='wrapper'><div class='item ryze'></div>
<div class='item irelia'></div>
<div class='item jinx'></div>
<div class='item katarina'></div>
<div class='item ziggs'></div>
</div>
Шаг 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-image: url($ryze);
background-position: 70% center;
&:after {
content: "Ryze";
}
}
&.irelia {
background-image: url($irelia);
background-position: 45% center;
&:after {
content: "Irelia";
}
}
&.jinx {
background-image: url($jinx);
background-position: 70% center;
&:after {
content: "Jinx";
}
}
&.katarina {
background-image: url($katarina);
background-position: 70% center;
&:after {
content: "Katarina";
}
}
&.ziggs {
background-image: url($ziggs);
background-position: 75% center;
&:after {
content: "Ziggs";
}
}
}
}
Так как подписи были убраны из разметки мы перенесли их в стили. Такой простой способ поможет с легкостью
внедрить аккордеон в структуру Вашего проекта.Вот и все. Готово!
