Эффект увеличения изображения на jQuery

В данной теме мы хотим поделиться с Вами небольшим скриптом на jQuery, который поможет Вам реализовать на своем сайте эффект увеличения изображения и добавления к нему подписи при наведении на него курсора мышки.

Ниже мы разместили два изображения, наведя на которые курсор мышки Вы сможете увидеть, о каком эффекте увеличения изображения идет речь.

Для работы данного скрипта Вам понадобится подключить на Вашем сайте библиотеку jQuery, если данная библиотека не была подключена ранее. Подключать ее следует следующим образом:

JavaScript код:

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Так же Вам понадобится прописать все необходимые стили для изображений и появляющихся к ним подсказок. Стили выглядят следующим образом:

HTML код:

<style type="text/css">
.object {
    width:300px;
    height:125px;
    border:3px solid #336699;
    margin:10px;
    overflow:hidden;
    position:relative;
    float:left;
}
.object img {
    border:0;
    position:absolute;
    width:300;
    height:125;
}
.hint {
    width:300px;
    height:30px;
    left:0;
    bottom:0;
    margin:0;
    padding:5px;
    font-size:15px;
    color:#EEEEEE;
    background:#000000;
    position:absolute;
    display:none;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
</style>

Далее необходимо добавить скрипт, который будет выполнять всю работу по увеличению и уменьшению изображений, а так же по добавлению и скрытию подсказок к ним:

JavaScript код:

<script type="text/javascript">
$(document).ready(function() {
 var scale = 1.2;
 $('.object').hover(function() {

    width_scale = $('.object').width() * scale;
    height_scale = $('.object').height() * scale;
    shift_left = ($('.object').width()-width_scale)/2;
    shift_top = ($('.object').height()-height_scale)/2;

    $(this).find('img').stop(false,true).animate({'width':width_scale,
    'height':height_scale, 'top':shift_top, 'left':shift_left}, {duration:333});
    $(this).find('div.hint').stop(false,true).fadeIn(333);
 },
 function() {
    $(this).find('img').stop(false,true).animate({'width':$('.object').width(),
    'height':$('.object').height(), 'top':'0', 'left':'0'}, {duration:333});
    $(this).find('div.hint').stop(false,true).fadeOut(333);
 });
});</script>

Сами же изображения, которые будут увеличиваться при наведении мышки, и подписи к ним необходимо описывать следующим образом:

HTML код:

<div class="object"><img src="image/img_1.png" alt="">
  <div class="hint">Подпись изображения №1</div>
</div>
<div class="object"><img src="image/img_2.png" alt="">
  <div class="hint">Подпись изображения №2</div>
</div>

В результате у Вас должен получиться точно такой же эффект увеличения изображения с добавлением подписи, как и в примере, показанном выше на данной страничке.

источник