JSFiddle - React, Tailwind, and code Playground

HTML

<div class="homepics"> 
    <div class="homemainpic">
        <img src='//placekitten.com/200/200' />
    </div>
    <ul>
        <li>        <img src='//placekitten.com/200/200' /></li>
        <li>
                <img src='//placekitten.com/200/201' />
    </li>
            <li>
                <img src='//placekitten.com/200/202' />
    </li>
            <li>
                <img src='//placekitten.com/200/204' />
    </li>
    </ul>
</div>

CSS

li {
    list-style-type: none;
    float: left;
} 
li img { 
height: 40px;
}

JavaScript

$(".homepics ul img").on('mouseover', function () {
        $('.homemainpic img').attr('src', $(this).attr('src'));
    });