Result

Tutorial

HTML

<div class="row g-4">			
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <a href="img/kucing.jpg" class="preview" alt="kucing">
      <img alt="kucing lucu" src="img/kucing.jpg"/>
    </a>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <a href="img/kucing2.jpg" class="preview" alt="kucing">
      <img alt="kucing lucu" src="img/kucing.jpg2"/>
    </a>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <a href="img/kucing3.jpg" class="preview" alt="kucing">
      <img alt="kucing lucu" src="img/kucing3.jpg"/>
    </a>
  </div>
  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <a href="img/kucing4.jpg" class="preview" alt="kucing">
      <img alt="kucing lucu" src="img/kucing4.jpg"/>
    </a>
  </div>
</div>

CSS

#preview{
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}

HTML

$(document).ready(function(){
      imagePreview();
});
this.imagePreview = function(){
            xOffset = -20;
            yOffset = 40;
$("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";
           var c = (this.t != "") ? "<br/>" + this.t : "";
         $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
         $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("slow");
    },
	function(){
        this.title = this.t;
        $("#preview").remove();
    });
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};