Переходы с помощью :hover

При использовании псевдокласса :hover изменение стиля, к примеру, цвета фона, происходит мгновенно. Для плавной смены свойств предназначены переходы, которые делаются с помощью свойства transition — оно позволяет задать продолжительность и метод перехода.

Для начала рассмотрим простой пример, когда плавно меняется цвет ссылок при наведении на них курсора.

a { color: green; transition: 1s; }
a:hover { color: red; }

Сперва задаём исходный цвет ссылок с помощью свойства color, добавляя его к селектору A. Там же вставляем свойство transition со значением времени перехода, в частности, 1s — это одна секунда. Ниже создаём стилевые правила с псевдоклассом :hover, которые будут применяться к ссылкам при наведении на них курсора мыши. Теперь смена цвета ссылок с красного на зелёный, и наоборот, будет происходить плавно в течение одной секунды. Чтобы задать время перехода, просто поменяйте значение transition (пример 1). Можно вставлять дробные числа (0.8s) или миллисекунды (800ms), помня, что в одной секунде тысяча миллисекунд (1s = 1000ms).

Пример 1. Плавное изменение цвета ссылок

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета ссылки при наведении

Переходы можно добавлять не только к текстовым ссылкам, но и к другим элементам веб-страницы. В сочетании со свойством transform, задающим трансформацию, это позволяет делать разные эффекты. В примере 2 показан блок <div> с картинкой внутри, при наведении на которую картинка увеличивается в масштабе. Для этого в стилях для <div> используем свойство overflow со значением hidden, чтобы картинка при увеличении не выходила за пределы блока. К img добавляем свойство transition, а для img:hover задаём свойство transform.

Пример 2. Масштабирование картинки при наведении

Результат данного примера показан на рис. 2.

Рис. 2. Увеличение картинки при наведении

Здесь применяется строчно-блочный элемент, чтобы размеры <div> соответствовали вставленной в него картинке. У изображений внутри блоков появляется небольшой отступ снизу, убираем его с помощью свойства display, добавляя его к селектору img.