How do I achieve this hover linear wipe transition in CSS/JS?

Question

I should also mention that I can't just put one image on top of the other since I'll also work with transparent images. linear wipe preview

Answer 1

You don't need js nor external libraries for this particular effect at all.

 .container{ width: 50%; height: 200px; position: relative; border: 2px solid red; }.underlay{ width: 100%; height: 100%; background: lightblue; }.overlay{ position: absolute; right: 0; top: 0; width: 0; height: 100%; background: pink; transition: 300ms; }.container:hover.overlay{ width: 100%; }

 <div class='container'> <div class='underlay'></div> <div class='overlay'></div> </div>