CSS3 увеличение картинки при наведении
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, CSS3, увеличение картинки Дата: 3-06-2011, 16:46

Всегда и по сей день было и есть стильно модно и эффектно использовать на сайте плавное увеличение картинки при наведении.
Раньше это можно было реализовать только с помощью яваскрипта, но теперь это можно сделать очень легко и просто с помощью CSS3 и свойства transition(CSS Transition позволяет назначать изменения свойств CSS плавно и в течение некоторого времени, такая css3 анимация). Подробнее можно посмотреть тут Обзор основных CSS3 свойств
Рассмотрим два примера горизонтальной навигации из иконок которые будут плавно увеличиваться при наведении курсора мыши.
В первом примере блок с иконками навигации не растягивается - увеличивающаяся иконка располагается поверх блока.
Второй пример - простое увеличение картинки с растягиванием блока с иконками.
Плавное увеличение картинки при наведении на jQuery

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