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

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

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

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

<div class="megaweb">
   <!--CSS3 увеличение картинки при наведении от http://megaweb.su/-->
   <a href="http://megaweb.su/">
    <img src="img/1_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/2_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/3_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/4_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/5_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/6_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/7_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/8_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/9_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/10_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/11_1.png" alt="" />
   </a>
   <a href="http://megaweb.su/">
    <img src="img/12_1.png" alt="" />
   </a>
  </div>


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

.megaweb {
text-align:center;
background:#ccc;
}

.megaweb a img {
width:50px;
height:50px;
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;
}

.megaweb a {
display:inline-block;
width:50px;
height:50px;
position:relative;
}

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


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

<div class="megaweb_su">
   <div class="megaweb_su1">
    <!--CSS3 увеличение картинки при наведении от http://megaweb.su/-->
    <a href="http://megaweb.su/">
     <img src="img/1_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/2_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/3_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/4_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/5_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/6_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/7_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/8_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/9_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/10_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/11_1.png" alt="" />
    </a>
    <a href="http://megaweb.su/">
     <img src="img/12_1.png" alt="" />
    </a>
    <br style="clear:both;" />
   </div>
  </div>


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

.megaweb_su {
text-align:center;
}

.megaweb_su1 {
background:#ccc;
height:100px;
display:inline-block;
}

.megaweb_su1 a {
display:block;
float:left;
width:50px;
height:50px;
padding:25px 5px 0 5px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

.megaweb_su1 a img {
width:100%;
display:block;
border:0;
}

.megaweb_su1 a:hover {
width:100px;
padding-top:0;
}



HTML код примеров валидный DTD XHTML 1.0 Strict, примеры корректно работают во всех современных браузерах поддерживающих CSS3 и свойство transition
Смотреть пример CSS3 увеличение картинки при наведении

Пользуйтесь на здоровье и не забывайте комментировать, добавить новость в закладки и ссылаться на MegaWeb.su
Версия для печати
  • 100
     Просмотров: 19 318      Комментариев: 2   

Понравилась новость CSS3 увеличение картинки при наведении на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на CSS3 увеличение картинки при наведении из категории Меню навигации

№ 2 Автор: dora 30 августа 2012 23:59

 Вот такой я - dora

dora
Гости
комментариев
публикаций

Статус:
Ребята, спасибо вам большое. Я думал такого не бывает, специально потратил время на регистрацию, чтобы поблагодарить. Ещё раз спасибо!

  • Нравится
  • 0
    

№ 1 Автор: nthanter 9 августа 2012 14:21

 Вот такой я - nthanter

nthanter
Гости
комментариев
публикаций

Статус:
этот стильный меню сильно сходится с программой для ОС как Object Doc, слов нету - супер!

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
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>

Глобус