Зум – эффект изображений на чистом CSS3

Недавно я решил перевести свой JQuery плагин “Увеличить изображение” на одном из своих сайтов в эквивалент чистого CSS, и результаты оказались поразительными: у меня получился такой же эффект, но с более гибкой конструкцией, не JavaScript, и гораздо меньше кода.
В этом уроке я поделюсь с вами кодом, который я написал, чтобы добавить плавный эффект масштабирования изображений при наведении.

Вот демо-версия: просто поместите курсор над изображениями.

Мы в основном воспользоваться функцию CSS Transitions , чтобы изображения плавно увеличивались и уменьшались.

Следующий код CSS будет определять нормальное состояние изображения и состояние при наведении. В нормальном состоянии мы выберем, какие свойства применяются к переходам, а всостояние при наведении, конечные значения. Это значит, что изображение будет иметь высокий Z-индекс при наведении.

.zit
{
    position:relative;
    width:100px;
    height:80px;
    left:0px;
    top:0px;
    border:1px solid black;
    /* Apply a CSS3 Transition to width, height, top and left properties */
    transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -o-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -moz-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}

.zit:hover
{
    width:150px;
    height:120px;
    left:-25px;
    top:-25px;
    z-index:9999;
}

.ZoomIt ul
{
clear:both;
}
.ZoomIt li
{
width:102px;
height:82px;
margin:4px;
float: left;
overflow:visible;
display: block;
}

Обратите внимание, что я дублировал все линии “transition” и добавлял –webkit– и –moz– –о– префиксы, что необходимо для других браузеров (Mozilla, Chrome, Opera, …)

В HTML-разметке, любое изображение (или другой элемент) с именем класса “zit” будет иметь эффект масштабирования:

<div class="ZoomIt">
   <ul>
      <li><a href="http://www.slapix.com/lol/i_gots_my_eye_on_you.aspx" title="I gots my eye on you"><img class="zit" src="http://www.slapix.com/img/i2m/i_gots_my_eye_on_you.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/take_my_advice.aspx" title="Paul McCartney"><img class="zit" src="http://www.slapix.com/img/i2m/take_my_advice.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/the_greatest_gift_of_all_is.aspx" title="George Harrison"><img class="zit" src="http://www.slapix.com/img/i2m/the_greatest_gift_of_all_is.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/i_ll_never_be_perfect.aspx" title="I'll never be perfect"><img class="zit" src="http://www.slapix.com/img/i2m/i_ll_never_be_perfect.jpg" /></a></li>
   </ul>
   <ul>
      <li><a href="http://www.slapix.com/lol/where_s_my_hug_today.aspx" title="Where's my hug today"><img class="zit" src="http://www.slapix.com/img/i2m/where_s_my_hug_today.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/i_m_nice_until_you_screw_it_up.aspx" title="I'm a nice person"><img class="zit" src="http://www.slapix.com/img/i2m/i_m_nice_until_you_screw_it_up.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/karma_has_no_deadline.aspx" title="Karma has no deadline"><img class="zit" src="http://www.slapix.com/img/i2m/karma_has_no_deadline.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/you_are_beautiful.aspx" title="You are beautiful"><img class="zit" src="http://www.slapix.com/img/i2m/you_are_beautiful.jpg" /></a></li>
   </ul>
</div>

Этот код будет работать на последних версиях основных браузеров, таких как IE10, Firefox, Chrome, Opera и т.д.

Оригинал / Перевод