Как создать «зум-эффект» с помощью Фотошоп. Урок Фотошоп

QuickTUTS.ru — УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

HTML/CSS: Зум-эффект для галереи изображений на чистом CSS

Привет! Сегодня мы поговорим о том, как можно создать зум-эффект для изображений, используя только CSS3. Без jQuery и т.д. Поехали!

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

Обратите внимание, что к каждому изображению я добавил класс zoom_it. В дальнейшем он нам пригодится.

Итак, добавляем стили для галереи:

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

Я хочу, чтобы при наведении мыши на изображение, оно увеличивалось в размере и начало отбрасывать тень. НО! Важно, чтобы оно располагалось над всеми элементами. Для этого изменим свойство z-index, которое отвечает за работу со слоями.

Вы уже заметили, что мы изменили размеры изображения, добавили тень. А чтобы все эти изменения происходили плавно, используем свойство transition (с приставками -moz, -webkit, -o для браузеров Mozilla, Chrome, Opera и т.д.). В данном случае для упрощения я использовал значение параметра all, т.е. плавное изменение применяется ко всем свойствам. Если бы я хотел применить разное время или эффект к каждому свойству, то должен был бы написать так:

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