Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用CSS变换扩展图像背后的缩放效果_Css_Image_Css Transitions_Behind - Fatal编程技术网

使用CSS变换扩展图像背后的缩放效果

使用CSS变换扩展图像背后的缩放效果,css,image,css-transitions,behind,Css,Image,Css Transitions,Behind,我正在创建一个插图公文包网站,并使用CSS转换来缩放更大的方框,以显示工作的详细缩略图 但我在挣扎,因为当我在缩略图上徘徊时,它们似乎总是在彼此后面,就像这样: 我需要他们走在前面,这样用户就可以看到图像的细节 我有所有的结构在那里,我只是说不出我做错了什么,让他们走在自己后面 任何帮助都将不胜感激 这是缩放效果的代码 scale { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: a

我正在创建一个插图公文包网站,并使用CSS转换来缩放更大的方框,以显示工作的详细缩略图

但我在挣扎,因为当我在缩略图上徘徊时,它们似乎总是在彼此后面,就像这样:

我需要他们走在前面,这样用户就可以看到图像的细节

我有所有的结构在那里,我只是说不出我做错了什么,让他们走在自己后面

任何帮助都将不胜感激

这是缩放效果的代码

scale {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease; 
}

}


给出更高的值会将其推到较低的z指数元素上。默认值为0

为了增加这一点,给你的普通照片一个z指数,比如说,1。把你想要的东西都放在高于1的位置上。
.scaleMe:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-box-shadow: 3px 3px 3px #666666;
-moz-box-shadow: 3px 3px 3px #666666;
-o-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
.scaleMe:hover {
    z-index: 1;
}