JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navpics" style="width: 150px;">
    <ul>
        <li class="container">
            <img src="https://pbs.twimg.com/profile_images/378800000686063679/4beaf07d42e6bd88802919285a83a079.jpeg" id="pic1">
            <img src="https://pbs.twimg.com/profile_images/2920207148/7383b145cd6bb8db2724cbe9aaa42caa.jpeg" id="pic2">
        </li>
        <li>
            <img src="img/navpic2.jpg">
        </li>
        <li>
            <img src="img/frog.jpg">
        </li>
        <li>
            <img src="img/navpic4.jpg">
        </li>
    </ul>
</div>

CSS

.container #pic2 {
    display: none;
}

.container:hover #pic1 {
    display: none;
}

.container:hover #pic2 {
    display: inline; /* it seems that default value of <img> is inline */
}

img {
    width: 100%;
}