Создаем эффект при наведении курсора мыши | RUDEBOXКаждый веб-мастер хочет создать отзывчивый для своего посетителя, если вам необходимо привлечь внимание посетителя при этом затратив минимум усилий тогда этот урок будет вам интересен. Мы рассмотрим как можно оживить изображения при наведении курсора. Такой эффект можно использовать не только к изображением, а, к примеру, к баннерной рекламе, это не оставит равнодушным посетителя, ведь такой простой эффект будет сразу бросаться в глаза, и так, давайте посмотрим, что у нас получилось.

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

Шаг 1. HTML

С разметкой все просто, у нас есть набор DIV объектов. Каждый из них содержит одно изображение и некоторые виртуальные маски. Последний элемент будет содержать две маски:

Создаем эффект при наведении курсора мыши RUDEBOX

Шаг 2. CSS

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

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

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