JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navpics">
    <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">
            <img src="https://pbs.twimg.com/profile_images/2920207148/7383b145cd6bb8db2724cbe9aaa42caa.jpeg" id="pic3">
        </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 {
    position: relative;
}
.container #pic1, .container #pic2 {
    position: absolute;
    left: 0;
    top: 0;
}
.container #pic1 {
    z-index: 1;
}
.container #pic2 {
    z-index: 0;
}
.container #pic3 {
    visible: hidden;
}
.container #pic1:hover {
    display: none;
}
.container #pic2:hover {
    z-index: 2;
}