Bild-zoom med CSS och jQuery

Börja med en bild-tag.

<img class="img-zoom" src="/images/testbild101.jpg" alt="Testbild" style="width:200px;" />

Sedan skapar vi CSS-kod för vad som skall hända vid hover.

.img-zoom {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.img-zoom-transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

Till sist knyter vi ihop det med lite jQuery kod.

<script>
  $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('img-zoom-transition');
 
    }, function() {
        $(this).removeClass('img-zoom-transition');
    });
  });
</script>

Exempel