I would love to have a gallery website with multiple thumbnails including 3 images that rotate as soon as I mousemove over each one.

I've found this amazing responsive fiddle in another thread from @matthias_h going through multiple thumbnail images while mousemove over the thumbnail box.

His fiddle: http://jsfiddle.net/matthias_h/2f2tth47/

The 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>

The 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"));});

Unfortunately there are two issues with this.

1. When duplicating it, moving over any of them also switches the images on the other ones.
2. It takes single images instead of bg positions via css which is less efficient since I'm personally using image sprites for all my work.

I have good experience with html/css but no experience with javascript. Would love to get some insight how I can fix these two issues. Mainly the first one to make a gallery with multiple images work in the first place.

Thanks in advance!