CSS3 увеличение картинки при наведении

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

VOVA_N

Дата: Пятница, 01.02.2013, 10:47 | Сообщение # 1

Майор

Группа: Администраторы

Сообщений: 86

Репутация: 4

Статус: Offline

CSS3 увеличение картинки при наведении горизонтальная css3 навигация из иконок

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

Посмотреть можно здесь: Перейти на сайт
Пример простой, разобраться легко, поэтому приведу сразу готовые коды:

Используется один блок DIV и внутри него ссылки с якорями иконками, блок с иконками не растягивается:

Код

CSS код для этого примера будет такой:

Код

.tarnada {
text-align:center;
background:#cbf2f9;
}

.tarnada a img {
width:80px;
height:80px;
display:block;
border:0;
position:relative;
top:0;
left:0;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

.tarnada a {
display:inline-block;
width:90px;
height:90px;
position:relative;
}

.tarnada a:hover img {
width:120px;
height:120px;
position:absolute;
top:-16px;
left:-16px;
z-index:2;
}

Прикрепления: 8968146.png (72.1 Kb)

CSS3 увеличение картинки при наведении

Страница 1 из 1
1