Gradually change the image using CSS (go through wipe)

Question

I have a strange question. This is strange because it will be very difficult for me to explain what I mean. I understand that I could get some negative reviews, but did not get another place to ask.

What I'm looking for is a method in CSS (or, if that is not possible, then JavaScript) to fade in on hover. I do not want him to gradually disappear or change the whole image. I want to have an image, and when I hover it over the mouse, the hovering part of the image changes, and the more I hover over the image, the more I could see another image. I hope this description is enough. Sorry, but I have no idea what it's called.

I did something similar to what I think here ( https://jsbin.com/xurokogicu/edit?html,css,output ) but this is in the scroll, I want this to happen when I hover the image with the mouse.

I hope you understand everything that I say here

Thanks in advance!

EDIT: Here are two photos to better understand my idea. A black line means that somewhere on this line (vertically) is the mouse pointer. If I hover over the left, the black line moves to the left and shows part of another image. Thus, first the image of the monkey appears first, and then, wherever I am, a black line appears that shows another image on the right side.

EDIT2: Guys, we found a living example of what I had in mind: jpegmini.com But with different images. Now I ask how I can do this or what it's called because my question remains unanswered. I would also change the name to others who are looking for it.

EDIT3: We found the ANSWER, this is exactly what I was looking for:

Js

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

CSS

 #c { background: url(link to other img); background-size: cover; } 

HTML

 <canvas id=c width=620 height=400></canvas> 

Answer 1

I would use canvas + CSS for this. This is due to the fact that it will give you full control over the movements of the mouse, as well as provide an easy way to enter the bar and various types of napkins (diagonal, custom, etc.), if you want it later.

• Define background image as CSS for canvas element
• Draw the top image snapped to the mouse position.

Example

 var ctx = c.getContext("2d"), img = new Image(); // image to show img.onload = start; img.src = "//i.imgur.com/mS4R13a.png"; function start() { c.onmousemove = function(e) { var r = this.getBoundingClientRect(), x = e.clientX - r.left; ctx.clearRect(0, 0, c.width, c.height); // clear canvas for new draw ctx.drawImage(img, 0, 0, x, c.height, 0, 0, x, c.height); // clip and draw image to x ctx.fillRect(x, 0, 5, c.height); // draw a thin black bar }; } 

 #c { background: url(//i.imgur.com/GQ6xVAT.png); background-size: cover; } 

 <canvas id=c width=620 height=400></canvas> 

Answer 2

To create the effect shown in your jsBin demo, which is a “slide” on the scroll, you can try this pure CSS approach to do this:

 .container { position: relative; height:200px; width:400px; border:1px solid #CCC; display: flex; flex-direction: column; background: url(http://lorempixel.com/400/200/); overflow: hidden; } .container .step { border:1px dashed rgba(255,255,255,0.2); flex:1; position: relative; z-index:2; } .container .newimg { background: url(http://lorempixel.com/g/400/200/) fixed no-repeat 9px 9px; position: absolute; height:100%; width:100%; bottom:0; left:0; z-index:1; transition:bottom .3s; } .container .step:nth-of-type(1):hover ~ .newimg { bottom: 25%; } .container .step:nth-of-type(2):hover ~ .newimg { bottom: 50%; } .container .step:nth-of-type(3):hover ~ .newimg { bottom: 75%; } .container .step:nth-of-type(4):hover ~ .newimg { bottom: 100%; } 

 <div class="container"> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="newimg"></div> </div> 

Logic / Explanation:

In principle, we have a container with an image, inside it there are "steps" that, when it hangs, change another child who contains another image. The second image has a fixed attachment to create a parallax effect.

Of course, this can be smoother by adding a few steps to simplify this, you could create a SASS loop to calculate each step:

 $steps: 10; @for $i from 1 through $steps { .container .step:nth-of-type(#{$i}):hover ~ .newimg { bottom: $i * 1/$steps * 100%; } } 

The result of this will look like this:

 .container { position: relative; height: 200px; width: 400px; border: 1px solid #CCC; display: flex; flex-direction: column; background: url(http://lorempixel.com/g/400/200/); overflow: hidden; } .container .step { border: 1px dashed rgba(255, 255, 255, 0.2); flex: 1; position: relative; z-index: 2; } .container .newimg { background: url(http://lorempixel.com/400/200/) fixed no-repeat 9px 9px; position: absolute; height: 100%; width: 100%; bottom: 0%; left: 0; z-index: 1; transition: .3s; } .container .step:nth-of-type(1):hover ~ .newimg { bottom: 10%; } .container .step:nth-of-type(2):hover ~ .newimg { bottom: 20%; } .container .step:nth-of-type(3):hover ~ .newimg { bottom: 30%; } .container .step:nth-of-type(4):hover ~ .newimg { bottom: 40%; } .container .step:nth-of-type(5):hover ~ .newimg { bottom: 50%; } .container .step:nth-of-type(6):hover ~ .newimg { bottom: 60%; } .container .step:nth-of-type(7):hover ~ .newimg { bottom: 70%; } .container .step:nth-of-type(8):hover ~ .newimg { bottom: 80%; } .container .step:nth-of-type(9):hover ~ .newimg { bottom: 90%; } .container .step:nth-of-type(10):hover ~ .newimg { bottom: 100%; } 

 <div class="container"> <!-- emmet code: .step*10 --> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="step"></div> <div class="newimg"></div> </div> 

jsFiddle with SCSS / SASS: https://jsfiddle.net/azizn/q4Lye8he/

jsFiddle for only 4 steps: https://jsfiddle.net/azizn/e92c6avj/

The only downside to this is the creation of additional HTML tags for each step.

Answer 3

The term you are looking for is “crossfade”. Here is an example here that works with hovering, although I'm not sure how you will do this for only part of the image, re hovering over (this attenuates everything on hovering). If you want it to cross the attenuation only where the mouse is, you probably have to go to the Canvas api to erase the pixels, but I'm not sure.

HTML:

  <div id="cf"> <img class="bottom" src="/images/Cirques.jpg" /> <img class="top" src="/images/Clown%20Fish.jpg" /> </div> 

And CSS:

 #cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover { opacity:0; }