Scrolling an image On Top Of Another On Mouse Over

Hey, here is one way to do that:

HTML

<div class="moveimg">
	<img src="https://placehold.it/350x150/ff0">
	<div class="moveimg-hover"><img src="https://placehold.it/350x150/cf0"></div>
</div>

jQuery

jQuery('body').on('mousemove', '.moveimg', function (e) {
  jQuery(e.currentTarget).find('.moveimg-hover').css('width', e.offsetX);
});

CSS

.moveimg { position: relative; display: inline-block; }
.moveimg-hover { position: absolute; top: 0; width: 0; height: 100%; overflow: hidden; }
.moveimg-hover img { max-width: none; }

JSFiddle Demo

Thanks for your reply.

How can i effect this in a wordpress environment?

Holy resurrected thread batman!

If you haven’t and can, create a child theme. The code could also go on a custom plugin.

It’s best to place you jQuery script in an external file and use wp_enqueue_script() to get it loaded. Be sure you specify ‘jquery’ as a dependency. The PHP script for this goes in your child theme’s functions.php.

Naturally, the HTML goes on a post or WP page.

The CSS goes in your child theme’s styles.css.