JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <img src="https://placeimg.com/600/600" />
    <div id="trigger">
        <div id="thumbnails">
             <img src="https://placeimg.com/60/60/any" />
             <img src="https://placeimg.com/60/60/any" /> 
             <img src="https://placeimg.com/60/60/any" /> 
             <img src="https://placeimg.com/60/60/any" /> 
        </div>
    </div>
</div>

CSS

#wrapper {
    position:relative; }

#trigger {
    width:100%;
    height:12px;
    position:absolute;
    left:0;
    bottom:220px;
 
 }

#thumbnails {
    width:100%;
    height:80px;
    display:none;
 }
#thumbnails img {
    margin:10px;
    float:left; }

JavaScript

$(document).ready(function(){
    $("#trigger").hover(function () {
       $(this).children("div").fadeTo(200, 1);
    }, function(){
         $(this).children("div").fadeOut(200); 
    });
});