Html CSS hover won'；我不能在铬上工作

我正在制作一个3d盒子，所以我需要绝对定位大多数元素。正面为

img

，侧面为空

div

。第三个

div

是标题div，位于图像上方，不透明度为0。我制作了简单的悬停效果，将不透明度改为1，在FF中效果很好，但在Chrome中效果不好

我已经看到在Chrome中的绝对定位元素上使用

hover

时存在一些bug，但据我所知，这些bug只出现在带有

z-index

的元素上，可能我弄错了。无论如何，这是方框代码，我真的需要一些帮助来解决这个问题，因为我无法确定Chrome的问题

HTML:

还有有问题的标题CSS：

.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
opacity: 0;
background-color: black;
color: white;
text-align: center;
padding-top: 25px;
transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.image:hover .image-caption{
opacity: 0.8;
}

---

这会产生问题

px

use

deg

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}

看

---

而且

我旋转方框没有问题，问题是

caption div

在悬停时不会改变不透明度。我发布了整个转换代码，因为问题可能在html和css中都存在，而我就是看不到。动画和旋转会消耗硬件，要最小化此chrome在

px

中无法正常工作，请使用

deg

。试着用deg来改变px，或者不使用任何值，这也是可以接受的。是的，我现在已经试过了，让它工作了，尽管我必须重新设计所有东西的样式。谢谢

.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
opacity: 0;
background-color: black;
color: white;
text-align: center;
padding-top: 25px;
transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.image:hover .image-caption{
opacity: 0.8;
}

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}