JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Hover picture and move horizontally to switch pics</h4>
<ul id="byimageslide">
<li><img src="http://www.byscripts.info/assets/img/pictures/byslidemenu/electronic.jpg" /></li>
<li><img src="http://www.byscripts.info/assets/img/pictures/byslidemenu/eiffeltower.jpg" /></li>
    <li><img src="http://www.byscripts.info/assets/img/pictures/byslidemenu/creditcards.jpg" /></li>
    <li><img src="http://www.byscripts.info/assets/img/pictures/byslidemenu/games.jpg" /></li>
<li><img src="http://www.byscripts.info/assets/img/pictures/byslidemenu/computer.jpg" /></li>
</ul>

CSS

#byimageslide{
    position: relative;
    width: 300px;
    height: 225px;
}
#byimageslide li{
    
    position: absolute;
}

JavaScript

var ByImageSlide = new Class({
    
    last_section : 0,
    sections : null,
    
    initialize: function() {
        
        var container = $('byimageslide');
        var width = container.getWidth();

        this.sections = container.getElements('li');
        
        var sections_count = this.sections.length;
        var section_width = width / sections_count;
        
        this.sections.setStyle('opacity', 0);
        this.sections[0].setStyle('opacity', 1);

        container.addEvent('mousemove', function(evt) {
            var mouse_position = evt.page.x - container.getPosition().x;
            var section = Math.floor(mouse_position / section_width);

            this.showSection(section);
        }.bind(this));
    },
    
    showSection: function(section) {

        if(this.last_section == section)
            return;
        
        this.sections[this.last_section].tween('opacity', 0);
        this.sections[section].tween('opacity', 1);
        
        this.last_section = section;
    }

});
new ByImageSlide();