JSFiddle - React, Tailwind, and code Playground

HTML

<span id="My_ID"><img class="My_img" src="/images/image1.jpg" alt="The name of image" width="200" height="100" /></span>

JavaScript

var first= true;
$('.My_img').hover(function(){    
    if(first == true){
     //First time this prevent Dulicated runing and shows errors
        first = false;//it is not thew first time anymore
var alt = $('.My_img').attr('alt');//Get the img alt
    var src = $('.My_img').attr('src');//Get the img src
    document.getElementById('My_ID').innerHTML = '<a href="' + src + '" target="_self" rel="zoom" title="' + alt + '"  ><img src="' + src +'" alt="' + alt + '" width="200" height="100"></a>';
    }
});