JSFiddle - React, Tailwind, and code Playground

by matthias_h

HTML

<article>
    <figure data-image-list="http://dummyimage.com/200x200/000000/cccccc.png&text=img1,http://dummyimage.com/200x200/dedede/cccccc.png&text=img2,http://dummyimage.com/200x200/b31031/cccccc.png&text=img3">
        <img class="imageHolder" data-src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" />
    </figure>
</article>

CSS

figure {
    width:100%;
    max-width:200px;
}
img {
    position:relative;
    width:100%;
}

JavaScript

$(".imageHolder").mousemove(function (event) {
    var xPos = event.pageX,
        imgPos = $(".imageHolder").offset().left,
        imgWidth = $(".imageHolder").width();
    console.log("xPos: ", xPos, ", imgPos: ", imgPos, ", imgWidth: ", imgWidth);
    var change1 = imgPos,
        change2 = imgPos + imgWidth / 3,
        change3 = imgPos + 2 * imgWidth / 3;
    console.log("change1: ", change1, "change2: ", change2, "change3: ", change3);
    $images = $("figure").data("imageList");

    var array = $images.split(',');
    if (xPos > change1) {
        $("img").attr("src", array[0]);
    }
    if (xPos > change2) {
        $("img").attr("src", array[1]);
    }
    if (xPos > change3) {
        $("img").attr("src", array[2]);
    }


});
$("img").mouseout(function () {
    $("img").attr("src", $("img").data("src"));
});