<script>
$(document).ready(function(){
// Классы шейпов
var hover_elems = $(".hover_elem1, .hover_elem2, .hover_elem3, .hover_elem4, .hover_elem5");
// Классы изображений
var images = ".hover_img1, .hover_img2, .hover_img3, .hover_img4, .hover_img5";
$("body").append("<div class='hover_float_img'></div>");
var img_exist = 0;
var img_src;
var images_arr = images.split(", ");
hover_elems.each(function(i, item) {
$(item).hover(function(){
img_src = $(images_arr[i]).find(".tn-atom__img").attr("src");
if (img_exist == 0) {
$(".hover_float_img").append( "<img class='tn-atom__img' src='" + img_src + "'>" );
img_exist = 1;
} else {
$(".hover_float_img .tn-atom__img").attr("src", img_src);
}
$(".hover_float_img").css("opacity", "1");
}, function(){
$(".hover_float_img").css("opacity", "0");
})
})
$(window).mousemove(function(e){
var width = $(".hover_float_img").get(0).offsetWidth;
var height = $(".hover_float_img").get(0).offsetHeight;
$(".hover_float_img").css("top", e.clientY - height / 2).css("left", e.clientX - width / 2);
})
})
</script>
<style>
.hover_float_img {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
opacity: 1;
transition: opacity .2s;
}
.hover_float_img,
.hover_float_img img {
/* Ширина изображения */
width: 400px;
}
/* При ширине экрана меньше чем 1200 пикселей эффект не работает */
@media screen and (max-width: 1200px) {
.hover_float_img {
display: none;
}
}
</style>