JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#myList{
    background: #ccc;
    
    position: relative;
}
#myList span{
    cursor: pointer;
}
#myList img{
    display: none;
    width: 500px;
    height: 500px;
    
    position: absolute;
    top: 10px;
    right: 10px;
    border: solid 5px red;
}
#myList li:hover{
    background: #888;
}
#myList li:hover img{
    display:block;
}