MegaWeb.su как создать свой сайт через html

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