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

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

<figure>
    <figcaption>Born To Run</figcaption>
    <img src="road-to-nowhere.jpg" alt>
    <img src="road-to-nowhere.jpg" alt>
</figure>

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

figure {
    position: relative;
    width: 60vw;
    height: 60vw;
    overflow: hidden;
    background-image: url(mad-dog.jpg);
    background-size: cover;
}
figcaption {
    position: absolute;
    top: 0;
    padding-top: 12vw;
    font-size: 10vw;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
}

Оба изображения размещены в элементе фигуры:

figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: 2s ease-in-out;
}

После чего каждое разделено пополам:

figure img:first-of-type {
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
figure img:last-of-type {
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

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

figure:hover img:first-of-type {
    transform: translateY(-45%);
}
figure:hover img:last-of-type {
    transform: translateY(45%);
}

Эффект обрезки, который на момент перевода урока поддерживается только браузерами на движке Webkit и браузером Chrome, воссоздается для других браузеров с помощью SVG, о чем подробней можно прочитать здесь.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Изменяющийся при прокрутке фон на чистом CSS
• Эффектов изысканных паспарту для изображения с использованием CSS
• Анимированные внутренние подписи на фоне изображений с применением фильтров