首先，我们设计外部“ beforeandafter ”容器的样式，使其相对定位并具有固定尺寸：

“beforeandafter”容器风格

div.beforeandafter {/ *主要容器* /

背景：白色;

边框：1px实心灰色;

显示：块;

宽度：600px; / *最大图像宽度的宽度* /

身高：400px; / *最大图像高度的高度* /

溢出：隐藏;

位置：相对; / * important * /}

将外部容器设置为“ relative ”位置有利于接下来的内容，即绝对定位两个内部DIV并使它们相对于该外部DIV锚定。这导致两个DIV堆叠在彼此之上。主要魔法发生在这些儿童DIV的风格内：

“之前”和“之后”的DIV风格

div.before，div.after {/ *在主容器内DIV之前和之后* /

宽度：100％;

身高：100％;

顶部：0;

左：0;

位置：绝对;

溢出：隐藏;

过渡：全部轻松进出; / * CSS过渡。* /

z-index：100;}div.after {

z-index：1; / *之后的div-index应小于之前的* /}div.beforeandafter：hover div.before {/ * onmouseover main container * /

宽度：0; / *将“div”之前的“更改”设置为0以隐藏它* /}

我们将两个DIV定位到“ absolute ”以填充外部容器的整个区域，通过操纵两个DIV的z-index值，“之前”DIV显示在顶部。此外，我们将DIV设置为“ overflow: hidden ”; 这是这个难题的关键部分。通过这样做，我们可以缩小“之前”DIV的宽度，而不会剪切或隐藏图像内部的图像，以逐渐显示“之后”DIV及其图像。由于这个选择器和CSS，实现了“之前”DIV的收缩：

div.beforeandafter：hover div.before {/ * onmouseover main container * /

宽度：0; / *将“div”之前的“更改”设置为0以隐藏它* /}

当鼠标滑过主容器时，我们想要将“之前”DIV的宽度设置为0.这个转换是平滑的，因为我们 transition 在子DIV中定义了“ ”属性来转换发生的属性值的任何变化在他们内部使用 1s 持续时间和“ ease-in-out ”计时功能。

ITPub博客

一个纯CSS前后图像效果（2）

最新文章