Gradually change image with CSS (wipe transition)
<p>I have a weird question. It is weird, because it will be really hard for me to explain what I mean. I realize, that I could get some negative feedback, but got no other place to ask.</p>

<p>What I am searching for is a technique in CSS (or if not possible, then also JavaScript) to gradually change image on hover. I don't want it to fade out or change the whole image at once. What I want, is to have an image, and when I hover it with my mouse, the hovered part of image changes, and the more I hover my image, the more I can see of the other image. I hope this description is enough. I am sorry, but I have no idea how is this called.</p>

<p>I made something similar of what I am thinking here (<a href="https://jsbin.com/xurokogicu/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/xurokogicu/edit?html,css,output</a>)
but this is on scroll, I want this to happen when I hover image with my mouse.</p>

<p>Hope you understand anything I am saying here,</p>

<p>Thanks in advance!</p>

<p>EDIT:
Here are two pictures to better understand my idea. The black line represents that somewhere on that line (vertically) is mouse cursor. If I hover my mouse on the left, the black line moves to left and reveals part of other image. So basically at first there is this monkey picture and then, wherever I hover, appears that black line which reveals other image on right side.</p>

<p><a href="https://i.stack.imgur.com/W88Lo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W88Lo.jpg" alt="enter image description here"></a></p>

<p><a href="https://i.stack.imgur.com/Jb1Xu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jb1Xu.jpg" alt="enter image description here"></a></p>

<p>EDIT2:
Guys we have found a live example of what I meant: <a href="http://jpegmini.com" rel="nofollow noreferrer">jpegmini.com</a>
But with different images.
Now what I am asking is how can I do it, or how is it called, because my question stands unanswered.
 I would also change the name of the title for others, who are searching for this.</p>

<p>EDIT3 :
WE HAVE FOUND AN ANSWER, this is exactly what I was looking for:</p>

<p>JS</p>

<pre><code>var ctx = c.getContext("2d"),
img = new Image();         // image to show

img.onload = start;
img.src = "link to img";

function start() {
  c.onmousemove = function(e) {
    var r = c.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height); 
    ctx.fillRect(x, 0, 5, c.height); 
  };

}
</code></pre>

<p>CSS</p>

<pre><code>#c {
  background: url(link to other img); 
  background-size: cover;
  }
</code></pre>

<p>HTML</p>

<pre><code>&lt;canvas id=c width=620 height=400&gt;&lt;/canvas&gt;
</code></pre>