这个作品集网站的创建者是如何制作出这种很酷的图像效果的？ http://www.adhamdannaway.com/
我目前正在训练我自己学习更高级的东西，但我在这种效果上遇到了麻烦。
我这样做的方法是制作一个宽度为 1280 像素的容器（1280 像素是 img 的宽度）。制作了 2 张图片，一张是彩色的，另一张是黑白的。2 divs width a width 50% and float left, float 打架。正确的没有出现，所以我使用了这个：背景位置：右上角并且它起作用了。即使在更大的屏幕尺寸上，它们也能完美地居中。但问题出在这里。当我将鼠标悬停在左侧 div 时，我该如何做到这一点，div 的宽度为 100%。另一个 div 也是如此。
我知道我可以用 #div:hover 然后宽度 100% 和固定图像超过 z-index 但这只发生在我悬停时而不是当我去悬停时。很明显，因为它在 :hover 上。但我目前不知道如何以更好/正确的方式做到这一点。
我把代码放在 jsfiddle.net/aLyde6pa/ 上，但由于某种原因它不起作用。
我可能解释得比我应该的多，但我希望你们能帮助我。
提前致谢！
ps：英语不是我的主要语言。:)