QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Демо

Во-первых, создадим небольшую галерею из шести изображений:

<ul id="zoom">
 <li>
 <a href="zoom-1.jpg"><img class="zoom_it" src="zoom-1.jpg" /></a>
 </li>
 <li>
 <a href="zoom-2.jpg"><img class="zoom_it" src="zoom-2.jpg" /></a>
 </li>
 <li>
 <a href="zoom-3.jpg"><img class="zoom_it" src="zoom-3.jpg" /></a>
 </li>
 <li>
 <a href="zoom-4.jpg"><img class="zoom_it" src="zoom-4.jpg" /></a>
 </li>
 <li>
 <a href="zoom-5.jpg"><img class="zoom_it" src="zoom-5.jpg" /></a>
 </li>
 <li>
 <a href="zoom-6.jpg"><img class="zoom_it" src="zoom-6.jpg" /></a>
 </li>
</ul>

Обратите внимание, что к каждому изображению я добавил класс zoom_it. В дальнейшем он нам пригодится.

Итак, добавляем стили для галереи:

#zoom {
 list-style:none;
 margin-left:-20px; /* Компенсируем отступ слева */
}
#zoom li {
 width:252px; /* Ширина размера изображения с учетом рамки в 1px */
 height:158px;
 float:left;
 margin-left:20px;
 margin-top:20px;
 overflow:visible;
 display: block;
}
.zoom_it {
 position:relative;
 width:250px;
 height:156px;
 top:0;
 left:0;
 border:1px solid #ccc;
}

Ладно, все выше сказанное не так важно, т.к. каждый может оформить галерею, как он захочет. Кто-то использует для этого таблицы, кто-то — div-ы. Не важно. Самое интересное дальше.

Я хочу, чтобы при наведении мыши на изображение, оно увеличивалось в размере и начало отбрасывать тень. НО! Важно, чтобы оно располагалось над всеми элементами. Для этого изменим свойство z-index, которое отвечает за работу со слоями.

.zoom_it:hover {
 width:300px; /* Увеличиваем ширину изображения */
 height:188px; /* Увеличиваем высоту изображения */
 top:-16px; /* Сдвигаем изображение вверх на значение (новая ширина - старая)/2 */
 left:-25px; /* Сдвигаем изображение влево на значение (новая высота - старая)/2 */
 z-index:9999; /* Располагаем изображение над всеми элементами */
 box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Добавляем тень */
 -webkit-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Safari и Chrome */
 -moz-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Firefox */
 transition: all 0.3s ease; /* Изменяем значения всех свойств плавно в течение 0,3 сек */
 -webkit-transition: all 0.3s ease; /* Для Safari и Chrome */
 -o-transition: all 0.3s ease; /* Для Opera */
 -moz-transition: all 0.3s ease; /* Для Firefox */
}

Вы уже заметили, что мы изменили размеры изображения, добавили тень. А чтобы все эти изменения происходили плавно, используем свойство transition (с приставками -moz, -webkit, -o для браузеров Mozilla, Chrome, Opera и т.д.). В данном случае для упрощения я использовал значение параметра all, т.е. плавное изменение применяется ко всем свойствам. Если бы я хотел применить разное время или эффект к каждому свойству, то должен был бы написать так:

transition: width 0.3s ease,height 0.3s ease,left 0.3s ease и т.д.;

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

Демо