Как сделать красивый эффект при наведении на картинку с исходниками.

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

Как и в других уроках по javascript, в конце описания вы сможете скачать исходники примера и применить этот код на практике, например, на своем сайте.

Сначала немного опишу то, в чем состоит суть эффекта, а потом приведу код.

У нас имеется обычная картинка, когда мы наводим на нее мышью, она увеличивается в размерах, немного приближаясь к нам,  её края закругляются и появляется тень.

Код написан только для одной картинки, если вам потребуется применить такой эффект сразу к нескольким картинкам, то нужно будет немного доработать код, пробежав по всем нужным картинкам с помощью функции – each.

Код jquery

$(document).ready(function(){

        var img = $('#img');
        
        img.mouseover(function(){
                $(this).animate({'-moz-border-radius':'20px','-webkit-border-radius':'20px','border-radius':'20px','width' : '400','height' : '225','opacity' : '1','margin-top' : '10px','margin-left' : '10px'},500);
                $(this).css({'box-shadow' : '0 0 10px rgba(0,0,0,0.5)'});
        });
        
        img.mouseleave(function(){
                $(this).animate({'-moz-border-radius':'0','-webkit-border-radius':'0','border-radius':'0','width' : '310','height' : '174','opacity' : '0.8','margin-top' : '0','margin-left' : '0'},500);
                $(this).css({'box-shadow' : '0'});
        });

});

Как видите, при наведение мы устанавливаем картинке одни стили, а когда мышь покидает область картинки, другие стили.

Также, с помощью метода – animate, мы делаем задержку на 500 миллисекунд(полсекунды).

Вот в принципе и все, чем я хотел сегодня с вами поделиться, в следующем уроке, скорее всего, расскажу о том, как сделать красивую и быструю галерею, но уже не на чистом javascript, а с помощью JQUERY.

Можете посмотреть и скачать демо пример, в котором будут все исходники, на этом все, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.