Доброго времени суток, дорогой читатель! В предыдущей статье, посвященной анимации в CSS3, я рассказал каким способом можно анимировать элементы на странице сайта. В этой статье я хотел бы поделиться с Вами конкретным примером — при наведении мыши на элемент будет увеличиваться в размерах, как бы выходя на передний план. Нам понадобится знание Transform и Transitions. Первое будет преобразовывать (трансформировать) элемент, а второй создаст анимацию эффекта трансформации.

Для начала давайте создадим элемент изображения с классом «test-img»:

<p><img src="img.png" class="test-img" /></p>

Теперь опишем для него CSS стиль и впишем в него эффект анимации:

.test-img{
-webkit-transition: transform 1s;
transition: transform 1s;
}

А в псевдоэлементе :hover, который срабатывает при наведении курсора мыши, впишем само преобразование элемента:

.test-img:hover {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}

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

box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

На этом все, пользуейся и развивайся! До новых встреч, дорогой читатель!

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