JSFiddle - React, Tailwind, and code Playground

by matthias_h

HTML

<article>
    <figure data-image-list="http://dummyimage.com/100x100/000000/cccccc.png&text=1,http://dummyimage.com/100x100/dedede/cccccc.png&text=2,http://dummyimage.com/100x100/0a0002/cccccc.png&text=3">
        <img data-src="http://dummyimage.com/100x100/cdcdcd/dddddd.png&text=+" src="http://dummyimage.com/100x100/cdcdcd/dddddd.png&text=+"/>
    </figure>
</article>

CSS

img {
    position:relative;
}

JavaScript

$("img").mousemove(function (event) {
    var xPos = event.pageX;
    $images = $("figure").data("imageList");
    var array = $images.split(',');
    if (xPos > 40) {
        $("img").attr("src", array[0]);
    }
    if (xPos > 65) {
        $("img").attr("src", array[1]);
    }
    if (xPos > 85) {
        $("img").attr("src", array[2]);
    }

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