title: Gradually change image with CSS (wipe transition)
body: <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>