JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<article>
    <img src="tv_image.png" alt="" class="skin" />
    <ul>
        <li class="img1"><img src="image1.jpg" alt="" /></li>
        <li class="img2"><img src="image2.jpg" alt="" /></li>
        <li class="img3"><img src="image3.jpg" alt="" /></li>
        <li class="img4"><img src="image4.jpg" alt="" /></li>
        <li class="img5"><img src="image5.jpg" alt="" /></li>
    </ul>
</article>

CSS

* {
    margin:0;
    padding:0;
}
article {
    /* make the shell */
    position:relative;
    height:200px;
    width:200px;
    overflow:hidden;
    background:#0f0;
}
.skin {
    /* lock the skin on top */
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99;
}
/* I'm not sure how you want to swap out the images, so this part is pretty ambiguous */
ul {
    height:100%;
    width:100%;
}
li {
    height:100%;
    width:100%;
}