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

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3, увеличение картинки    Дата: 3-06-2011, 16:46
CSS3 увеличение картинки при наведенииCSS3 увеличение картинки при наведении горизонтальная css3 навигация из иконок
Всегда и по сей день было и есть стильно модно и эффектно использовать на сайте плавное увеличение картинки при наведении.
Раньше это можно было реализовать только с помощью яваскрипта, но теперь это можно сделать очень легко и просто с помощью CSS3 и свойства transition(CSS Transition позволяет назначать изменения свойств CSS плавно и в течение некоторого времени, такая css3 анимация). Подробнее можно посмотреть тут Обзор основных CSS3 свойств
Рассмотрим два примера горизонтальной навигации из иконок которые будут плавно увеличиваться при наведении курсора мыши.
В первом примере блок с иконками навигации не растягивается - увеличивающаяся иконка располагается поверх блока.
Второй пример - простое увеличение картинки с растягиванием блока с иконками.
  • 100
     Просмотров: 21 344      Комментариев: 2   

Плавное увеличение картинки при наведении на jQuery

Автор: Admin    Категория: Магия ЯваСкрипт / jQuery    Теги:  увеличение картинки    Дата: 20-02-2011, 18:02
Плавное увеличение картинки при наведении на jQueryСамое простое плавное увеличение картинки при наведении на jQuery
Самый простой, на мой взгляд, способ реализации плавного увеличения картинки при наведении. Используется минимум кода, если нужно просто увеличить картинку, и блок с картинкой при этом тоже будет растягиваться, то можно обойтись без CSS и простым кодом картинки с нужным классом, так же есть пример, где картинка увеличивается не растягивая дизайн сайта, там картинка уже в отдельном блоке и необходимо применить CSS.
  • 100
     Просмотров: 20 205      Комментариев: 6   

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус