使用CSS过渡扩大图像背后的缩放效果

时间:2014-04-08 17:34:30

标签: css image css-transitions behind

我正在创建一个插图组合网站,并使用CSS过渡来扩大更大的框以显示详细的工作缩略图。

但是我正在努力,因为当我将鼠标悬停在缩略图上时,他们似乎总是像往常一样落后于彼此:demo

我需要它们在前面,因此用户可以看到图像的细节。

我拥有所有的结构,我只是无法告诉我做错了什么让他们自己落后。

真的很感激任何帮助。

这是缩放效果的代码!

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

}

.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;

}

1 个答案:

答案 0 :(得分:1)

.scaleMe:hover {
    z-index: 1;
}

给予较高的z-index会将其推向较低的z-index元素。默认值为0. Fiddle