JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask">
    <div class="images">
        <img src="http://lorempixel.com/300/200/sports/" />
        <img class="active" src="http://lorempixel.com/300/200/nature/" />
        <img src="http://lorempixel.com/300/200/city/" />
        <img src="http://lorempixel.com/300/200/food/" />
    </div>
</div>

CSS

.mask {
    width:400px;
    height:200px;
    overflow:hidden;
    position:relative;
}
.images {
    width:1240px;
    position:absolute;
    left:-255px;
}
img:not(.active) {
    cursor:pointer;
    opacity:.3
}

JavaScript

$("img", ":not(.active)")
    .on("click", function() {
        var $this = $(this);
        
        $("img").removeClass("active");
        $this.addClass("active");
        
        goto($this.index());
    });
$("img").on("mouseenter", function() {
    console.log("silence");
});

function goto(i) {
    $(".images").animate({
        left: 55-i*310
    });
}