如何在悬停时实现图像变换？

Question

所以我试图在这个网站上实现这样的效果.

(在您可以将鼠标悬停在图像上方的底部附近,当您在图像上移动时它会显示另一个图像)

有任何想法吗？我的意思是我知道他们只是覆盖了这两个图像,但他们如何在悬停时使用CSS/Javascript显示远端图像？这超出了我的范围.我试过自己复制它没有成功.

Answer 1

试试这个:

var main = document.querySelector('.main');
var one = document.querySelector('.one');
var two = document.querySelector('.two');

main.onmousemove = function (e) {
    var width = e.pageX - e.currentTarget.offsetLeft;
    one.style.width = width + "px";
    two.style.left = width + "px";
}

.main {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.one {
    background-image: url('http://www.lorempixel.com/200/200');
    width: 50%;
    height: 100%;
}
.two {
    background-image: url('http://www.lorempixel.com/200/200/sports');
    position: absolute;
    left: 50%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-position: right;
}

<div class="main">
  <div class="one"></div>
  <div class="two"></div>
</div>

工作小提琴