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

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

Шаг 1. HTML

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

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

Шаг 2. CSS

Теперь рассмотрим стили, для начала создадим правила которые будут показывать и скрывать последовательно изображения.

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

Далее делаем изображение видимым и применяем его поверх свойства «stack».

Затем нам необходимо свойство которое обратит вспять порядок отображения изображений, соответственно установив z-index. Так как мы будем обрабатывать всю анимацию на 0,8 секунды, а откладывать начало для каждого изображения с 0,1 секунды.

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

Последним шагом будет запуск слайд-шоу при наведении курсора мыши.

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

Вот и все. Готово!

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