Při najetí na obrázek se obrázek zvětší jako po najetí lupy s možností pohybu myši a obrázku.

Každému obrázku, na který chcete efekt použít přidejte class=“magIMG“
Některé CSS mohou funkci znepřesnit, potom si musíte individuálně upravit CSS.

CSS:
.MagnifyImageDiv {
position: relative;
overflow:hidden;
padding:0;
margin:0;
display: inline-block;
}
.MagnifyImageDiv .hovermagnified {
position: absolute;
top:0;
left:0;
pointer-events:none;
transform:scale(1);
transform-origin: 0 0;
transition: transform 0.3s;
z-index:1;
margin: 0;
}
.MagnifyImageDiv .hovermagnified.hovered {
transition: transform 0.3s;
transform:scale(1.5);
}

jQuery:
if($(".magIMG")){
$(".magIMG").each(function(){
$(this).wrap("<div class='MagnifyImageDiv'></div>");
$("<img class='hovermagnified' src='"+$(this).attr("src")+"'>").insertAfter($(this));
});
$(".MagnifyImageDiv").on("mouseover",function(){
$(this).find(".hovermagnified").addClass("hovered");
}).on("mouseout",function(){
$(this).find(".hovermagnified").removeClass("hovered");
}).on('mousemove', function(e){
$(this).find(".hovermagnified").css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
}

Ukázka:

nečas síťovky

Kategorie: Poznámky

Napsat komentář

Vaše emailová adresa nebude zveřejněna.

This site uses Akismet to reduce spam. Learn how your comment data is processed.