<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<img src="https://preview.ibb.co/kdgrrH/car_1.jpg" alt="car_1" border="0">
<img src="https://preview.ibb.co/c31hWH/car_2.jpg" alt="car_2" border="0">
<img src="https://preview.ibb.co/n2ZrQc/car_3.jpg" alt="car_3" border="0">
<img src="https://preview.ibb.co/jmFjBH/car_4.jpg" alt="car_4" border="0">
</div>
</body>
</html>
.container img{
width:250px;
height: 250px;
}
#imglg{
position: absolute;
z-index: 5;
border:3px solid #ddd;
}
$(function() {
$(".container img").hover(MouseIn, MouseOut);
$(".container img").mousemove(function(e) {
$("#imglg").css("top", e.pageY + "px");
$("#imglg").css("left", e.pageX + "px");
});
function MouseIn(e) {
var img = $('<img id="imglg"/>');
img.attr("src", this.src);
$("body").append(img);
}
function MouseOut(e) {
$("#imglg").remove();
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.