JSFiddle - React, Tailwind, and code Playground

HTML

<img id="main" src="http://lorempixel.com/100/100/abstract/" />
<ul id="myList">
    <li>
        <span>List Item One</span>
        <img src="http://lorempixel.com/100/100/abstract/" />
    </li>
    <li>
        <span>List Item Two</span>
        <img src="http://lorempixel.com/100/100/fashion/" />
    </li>
    <li><span>List Item Three</span>
        <img src="http://lorempixel.com/100/100/city/" />
    </li>
</ul>

CSS

#main {
    position: absolute;
    top: 0px;
    left: 10px;
    border: solid 5px red;
}
#myList{
    background: #ccc;
    position: absolute;
    top:110px;
}
#myList span{
    cursor: pointer;
}
#myList img{
    display: none;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -110px;
    left: 10px;
    border: solid 5px red;
}
#myList li:hover{
    background: #888;
}
#myList li:hover img{
    display:block;
}