'Ello Stackoverflow!
我想知道是否有人可以帮我解决这个问题.我发现Jason Mayes的这个前/后图像查看器,我正在努力让它成为响应中心.
所以我发现"物体贴合:覆盖;" 和"物体位置:50%50%;" 工作得很好,但我很快就意识到过渡本身并没有以某种方式设计.
我把Jason的笔分开来更清楚地告诉你:http: //codepen.io/RogerAntonio/pen/rVXrma
我认为问题出在某处:
.container img {
object-fit: cover;
object-position: 50% 50%;
overflow: hidden;
}
.beforeAfter .before {
z-index:2;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
Run Code Online (Sandbox Code Playgroud)
先感谢您!