JSFiddle - React, Tailwind, and code Playground

HTML

<a class="thumbnail"><img                      src=image/database/jewel/2/rubin1.png /><span><img                             src=image/database/jewel/2/rubin1.png align=/></span></a>

CSS

.thumbnail{   
position: relative;   
z-index: 0;   
}   

.thumbnail:hover{   
background-color: transparent;   
z-index: 50;   
}   

.thumbnail span{ /*CSS for enlarged image*/   
position: absolute;   
visibility: hidden;   
color: black;   
text-decoration: none;   
}   

.thumbnail span img{ /*CSS for enlarged image*/   
border-width: 0;
}   

.thumbnail:hover span{ /*CSS for enlarged image on hover*/   
visibility: visible;   
top: -59;   
left:300px; /*position where enlarged image should offset horizontally */   

}