Как создать CSS3 аккордеон изображений

В этом учебном руководстве мы создадим CSS аккордеон с изображениями, который разворачивает элементы по щелчку. При помощи селекторов и вложенной структуры мы можем управлять отображением элементов/слайдов с помощью переключателей.

Сложность

css аккордеон

HTML разметка

Основная идея - создать вложенную структуру, которая позволит нам просто перемещать соответствующие слайды CSS аккордеона в одну сторону, т.е. перемещение одного основного слайда, переместит все свои внутренние слайды (вложенные элементы). Управлять слайдами будем с помощью переключателей.

<div class="ia-container">

<figure>
<img src="/images/1.jpg" alt="image01" />
<input type="radio" name="radio-set" checked="checked" />
<figcaption><span>True Colors</span></figcaption>

<figure>
<img src="/images/2.jpg" alt="image02" />
<input type="radio" name="radio-set" />
<figcaption><span>Honest Light</span></figcaption>

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->

<figure>
<!-- ... -->
</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</figure>

</div>

CSS

Зададим CSS аккордеону ширину и скроем его.

.ia-container {
    width: 685px;
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,0.6);
}

Ширина вычисляется следующим образом:

( (Number of images - 1) * 50px ) + 335px

Где 50px - ширина видимой части изображения, и 335px ширина полного изображения. В нашем случае ((8 – 1) * 50px) + 335px = 350px + 335px = 68px.

У каждого из блоков будет отступ слева в 50px (видимая часть). Это будет позиция, относительно родительского элемента. Ширина CSS аккордеона равна ширине изображения, т.е. 335px.

.ia-container figure {
    position: absolute;
    top: 0;
    left: 50px; /* ширина видимой части */
    width: 335px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
    transition: all 0.3s ease-in-out;
}

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

.ia-container > figure {
    position: relative;
    left: 0 !important;
}

У изображения будет ширина 100%, чтобы оно заполнило весь блок:

.ia-container img {
    display: block;
    width: 100%;
}

Каждая из кнопок будет покрывать видимую часть слайда. Установим непрозрачность на 0, так что мы их не видим. z-index должен быть высоким:

.ia-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* just cover visible part */
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
    opacity: 0;
    z-index: 100;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ia-container input:checked{
    width: 5px;
    left: auto;
    right: 0px;
}
.ia-container input:checked ~ figure {
    left: 335px;
    transition: all 0.7s ease-in-out;
}

Здесь мы добавили два длительных перехода, один "по умолчанию", второй при проверки input, это создаст эффект "перетасовки".

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

.ia-container figcaption {
    width: 100%;
    height: 100%;
    background: rgba(87, 73, 81, 0.1);
    position: absolute;
    top: 0px;
    transition: all 0.2s linear;
}
 
.ia-container figcaption span {
    position: absolute;
    top: 40%;
    margin-top: -30px;
    right: 20px;
    left: 20px;
    overflow: hidden;
    text-align: center;
    background: rgba(87, 73, 81, 0.3);
    line-height: 20px;
    font-size: 18px;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

При выделении слайда, удалим наложение, установив непрозрачность RGBA в 0:

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
    background: rgba(87, 73, 81, 0);
}

Блок будет исчезать и перемещаться с задержкой (должен открыться первый слайд)

.ia-container input:checked + figcaption span {
    transition: all 0.4s ease-in-out 0.5s;
    opacity: 1;
    top: 50%;
}

Задержка последнего слайда не должна быть высокой:

.ia-container #ia-selector-last:checked + figcaption span {
    transition-delay: 0.3s;
}

Далее сделаем небольшой эффект при наведении на закрытый слайд. Учтите, что всю часть покрывает radio input (он находится поверх всех других элементов):

.ia-container input:hover + figcaption {
    background: rgba(87, 73, 81, 0.03);
}

Проверяем, что input должен получает низкий z-index, опять же, чтобы предотвратить нежелательные поведения в браузере Chrome:

.ia-container input:checked ~ figure input{
    z-index: 1;
}

И, наконец, мы добавим некоторые медиа-запросы, для адаптации под различные размеры экранов:

@media screen and (max-width: 720px) {
    .ia-container {
        width: 540px;
    }
 
    .ia-container figure {
        left: 40px;
        width: 260px;
    }
 
    .ia-container input {
        width: 40px;
    }
 
    .ia-container input:checked ~ figure {
        left: 260px;
    }
 
    .ia-container figcaption span {
        font-size: 16px;
    }
}
 
@media screen and (max-width: 520px) {
    .ia-container {
        width: 320px;
    }
 
    .ia-container figure {
        left: 20px;
        width: 180px;
    }
 
    .ia-container input {
        width: 20px;
    }
 
    .ia-container input:checked ~ figure {
        left: 180px;
    }
 
    .ia-container figcaption span {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 10px;
        margin-top: -20px;
    } 
 
}

Перевод статьи Image Accordion with CSS3

Тэги: transitionslideraccordion

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.