JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div class="content">
    <img id="item1" src="item1.jpg"/>
    <img id="item2" src="item2.jpg"/>
    <img id="item3" src="item3.jpg"/>
</div>
<ul class="img-preview">
    <li class="img-icon"><a href="#item1" class="button">Image 1</a>
    </li>
    <li class="img-icon "><a href="#item2" class="button">Image 2</a>
    </li>
    <li class="img-icon selected"><a href="#item3" class="button">Image 3</a>
    </li>
    <div class="img-highlight"></div>
</ul>

CSS

.img-preview {
    position:relative;
    border:1px solid green;
}
.img-preview .img-icon {
    display:inline;
    cursor:pointer;
}
.img-highlight {
    width:100px;
    position:absolute;
    border-bottom:5px solid blue;
}
.content {
    position:relative;
    width:150px;
    height:150px;
}
.content img{
    width:150px;
    height:150px;
    position:absolute;
    border:1px solid red;
    visibility:hidden;
}
.content .show{
    visibility:visible;
}

JavaScript

$(".img-preview .img-icon a").on("click", function () {
    var indx = $(this).position().left;
    var widths = $(this).css("width");
    $('.img-preview .img-highlight').stop().animate({
        left: indx,
        width: widths
    }, 300);
    var adjacentItem = $(this).attr("href").substring(1); //item2
    var visibleItem = $(".container").children($(".show"));
    if(visibleItem) visibleItem.removeClass("show");
    $(".content #"+adjacentItem).addClass("show");
});
$(".img-preview .img-highlight").css("left", $(".img-preview .img-icon.selected").position().left);
$(".img-preview .img-highlight").css("width", $(".img-preview .img-icon.selected").css("width"));
$(".content #" + $(".img-preview .selected a").attr("href").substring(1)).addClass("show");