Masz w swoim sklepie zdjęcia produktów które pokazuje dużo szczegółów ale miniaturki produktów są zbyt małe aby klient mógł je dostrzec? W tym poradniku zobaczysz modyfikacje która powiększa zdjęcie  produktu po najechaniu na zdjęcia myszką

Zobacz poradnik

.big-image {
    position: absolute;
    top: 125px;
    left: 125px;
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%);
    border: 2px solid #575757;
    box-shadow: 0px 1px 15px #ccc;
    z-index: 9;
}

$('.thumbnail.product-thumbnail img').on('mouseover', function() {
    $(this).before(
        "<div class='big-image'><img src='" + $(this).attr("data-full-size-image-url") + "'</div>"
    );
    $('.big-image').animate({
        width: 500,
        height: 500
    });
});

$(document).on('mouseleave', '.big-image', function() {
    $('.big-image').remove();
});