<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();
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.