Скольжение изображений при наведении с использованием CSS3

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

Демонстрация

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

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

Как работает данный эффект

Перед тем, как мы погрузимся в подробности реализации, давайте попробуем понять принцип создания и работы этого эффекта «на пальцах». На самом деле, все достаточно просто.

Во-первых, у вас имеется следующее изображение:

Как работает CSS3

Оно включает в себя обе половины картинок, которые мы хотим показать. Все, что нам нужно сделать, это вначале показать верхнюю половину картинки, а потом, при наведении курсора, прокрутить её так, чтобы стала видна нижняя часть.

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

изображение внутрь контейнера

Заметьте, контейнер делит нашу картинку напополам. В HTML, простое расположение изображения внутри контейнера, размер которого меньше, чем его содержимое не даст нужного эффекта. Чтобы убедиться, что видна только одна половина изображения, необходимо задать для контейнера высоту:

контейнер делит картинку напополам

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

Теперь, все что нам нужно сделать, это определить переход (transition), который будет сдвигать нашу картинку, когда пользователь наведёт на нее курсор мыши:

сдвигать картинку, когда пользователь наведёт на нее курсор

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

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

Реализация эффекта

Ок, теперь вы имеете представление о том, что мы будем делать. Что ж, приступим! Для начала убедитесь в том, что вы создали заготовку для будущей страницы с поддержкой стандарта HTML5.

Добавление изображения

Начнем с первого, самого очевидного шага — добавим изображение:

Добавление изображения

Необходимо сохранить это изображение в папку, где находится ваш HTML-файл. Вы можете поместить изображения в отдельную папку, но для простоты примера я оставлю его в той же директории, где находится файл HTML.

После этого, добавьте в структуру вашего HTML-файла тег <img>, указывающий на изображение:

<img src="smiley.png" height="300" width="150"/>

Это достаточно простой шаг. Следует заметить, что высота задана в 150 пикселей, что составляет половину от высоты исходной картинки.

Помещение изображения в контейнер

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

<div class="pictureContainer">
<img src="images/smiley.png" height="300" width="150"/>
</div>

Теперь, наш элемент <img> окружен тегами <div>, которые имеют класс «pictureContainer». Мы еще вернемся к нему чуть позже.

Обрезание изображения

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

Наш тег <div> — внешний контейнер — уже имеет значение класса «pictureContainer». Давайте создадим стилевое правило, для этого класса:

.pictureContainer {
    height: 150px;
    width: 150px;
    overflow: hidden;
}

Поместите данное правило внутрь блока стилей своей HTML-страницы. Заметьте, что как было рассказано выше, размеры контейнера заданы 150 на 150 пикселей. Свойству overflow присвоено значение hidden, чтобы все выходящее за пределы контейнера, обрезалось.

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

Создание перехода

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

.pictureContainer img {
    position: relative;
    top: 0px;
}
.pictureContainer img:hover {
    top: -150px;
}

Заметьте, что я создал стилевое правило для тега <img>, а также для этого тега, но когда на него наведен курсор мыши, для чего мы используем псевдокласс :hover. Ключевым является также задание свойства top в «0px» для начальной точки и «-150px» для конечной.

Чтобы иметь возможность явно задавать значения в пикселях, я установил свойство position: relative. С помощью этого свойства, стандартное размещение HTML-элементов всегда можно переопределить путём явного задания значений в пикселях.

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

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

.pictureContainer img {
    position: relative;
    top: 0px;
     
    transition: top .2s ease-in-out;
}
.pictureContainer img:hover {
    top: -150px;
}

Просто добавьте строку, выделенную жирным шрифтом, в соответствующий CSS-стиль. Она будет указывать на свойство, для которого нужно сделать переход. Кроме задания непосредственно «слушаемого» свойства, я указал, что переход должен длиться 2 секунды и использовать функцию перехода «ease-in-out».

Вендорные префиксы

Я не указывал вендорные префиксы для всех браузеров при объявлении перехода. Вместо того, я предпочитаю использовать бесплатную библиотеку вендорных префиксов (-prefix-free library) чтобы управлять ими. Если же вы не хотите использовать сторонние библиотеки, то просто добавьте эти самые префиксы (-ms, -o, -moz, -webkit) к свойству transition.

Теперь, если вы взглянете на результаты своей работы, то все будет работать именно так, как было задумано. Если у вас установлен современный браузер, который поддерживает CSS3-переходы, то вы увидите красивую и плавную анимацию.

Заключение

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

Перевод статьи «Slide Image on Hover using CSS3» был подготовлен дружной командой проекта Сайтостроение от А до Я.