首先,我们设计外部“ 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博客 ” ,链接:http://blog.itpub.net/69933200/viewspace-2651610/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69933200/viewspace-2651610/