JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnails">
    <img src="http://intelligen.info/images/Personal/instagram Randoms/alicecurls.jpg"  data-large="alicecurls"/>
    <img src="http://intelligen.info/images/Personal/instagram Randoms/genna.jpg" data-large="genna"/>
</div>

<div class="displayed-image">
    <img id="alicecurls" class="repeatable" />
    <img id="genna" class="repeatable"  />
</div>

CSS

.displayed-image img {
   visibility: hidden;
    height: 200px;
    position: absolute;
    top: 100px;
}

.thumbnails img {
    height: 70px;
    border: 1px solid;
}

JavaScript

$(".thumbnails").on("mouseover ", "img", function () {
    $('#' + $(this).attr('data-large'))
     .attr('src', $(this).attr('src'))
     .css('visibility', 'visible');
});

$(".thumbnails").on("mouseout ", "img", function () {   
     $('#' + $(this).attr('data-large')).css('visibility', 'hidden');
});