Css 图像覆盖问题

我使用下面的代码进行图像叠加效果。我从一些网站上得知，刚才我注意到它在firefox和IE上不工作，只显示黑色背景。但当我们悬停时，它会显示图片，这是我的代码。我正在使用它的引导

.hovereffect{
宽度：100%；
身高：100%；
浮动：左；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
游标：默认值；
背景：#000；
光标：指针；
}
.hovereffect.overlay{
宽度：100%；
身高：100%；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
填充：50px 20px；
}
.悬停效应{
显示：块；
位置：相对位置；
最大宽度：无；
宽度：计算（100%+20px）；
-webkit转换：不透明度0.35s，-webkit转换0.35s；
过渡：不透明度0.35s，变换0.35s；
-webkit转换：translate3d（-10px，0,0）；
转换：translate3d（-10px，0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.悬停效果：悬停img{
不透明度：0.4；
过滤器：α（不透明度=40）；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.悬停效应h2{
文本转换：大写；
颜色：#fff；
文本对齐：居中；
位置：相对位置；
字号：17px；
字体大小：粗体；
溢出：隐藏；
填充：0.5em0；
背景：rgba（0,0,0,0.5）；
}
.h2：之后{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：2倍；
背景：#fff；
内容：''；
-webkit转换：-webkit转换0.35s；
转变：转变0.35s；
-webkit转换：translate3d（-100%，0,0）；
转换：translate3d（-100%，0,0）；
}
.悬停效果：悬停h2:之后{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.hovereffect a、.hovereffect p{
颜色：#FFF；
不透明度：0；
过滤器：alpha（不透明度=0）；
-webkit转换：不透明度0.35s，-webkit转换0.35s；
过渡：不透明度0.35s，变换0.35s；
-webkit转换：translate3d（100%，0,0）；
转换：translate3d（100%，0,0）；
}
.悬停效果a：悬停
{
颜色：#fff；
文字装饰：无；
}
.hovereffect:悬停a、.hovereffect:悬停p{
不透明度：1；
过滤器：α（不透明度=100）；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}

效果12

.hovereffect{
宽度：100%；
身高：100%；
浮动：左；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
游标：默认值；
背景：#000；
光标：指针；
}
.悬停效应{
不透明度：0；
}
.hovereffect.overlay{
宽度：100%；
身高：100%；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
填充：50px 20px；
}
.悬停效应{
显示：块；
位置：相对位置；
最大宽度：无；
宽度：计算（100%+20px）；
-webkit转换：不透明度0.35s，-webkit转换0.35s；
过渡：不透明度0.35s，变换0.35s；
-webkit转换：translate3d（-10px，0,0）；
转换：translate3d（-10px，0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.悬停效果：悬停img{
不透明度：0.4；
过滤器：α（不透明度=40）；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.悬停效应h2{
文本转换：大写；
颜色：#fff；
文本对齐：居中；
位置：相对位置；
字号：17px；
字体大小：粗体；
溢出：隐藏；
填充：0.5em0；
背景：rgba（0,0,0,0.5）；
}
.h2：之后{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：2倍；
背景：#fff；
内容：''；
-webkit转换：-webkit转换0.35s；
转变：转变0.35s；
-webkit转换：translate3d（-100%，0,0）；
转换：translate3d（-100%，0,0）；
}
.悬停效果：悬停h2:之后{
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.hovereffect a、.hovereffect p{
颜色：#FFF；
不透明度：0；
过滤器：alpha（不透明度=0）；
-webkit转换：不透明度0.35s，-webkit转换0.35s；
过渡：不透明度0.35s，变换0.35s；
-webkit转换：translate3d（100%，0,0）；
转换：translate3d（100%，0,0）；
}
.悬停效果a：悬停
{
颜色：#fff；
文字装饰：无；
}
.hovereffect:悬停a、.hovereffect:悬停p{
不透明度：1；
过滤器：α（不透明度=100）；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}

效果12

Everywhere在您的样式中添加了

-webkit-

，也为

-moz-

@aavrug不工作bro添加了相同的内容。对我来说，即使不添加

-moz-

部分，它也可以正常工作。您能显示输出图像吗？因为它在我的mozilla中使用以下代码：@BhavinShah请检查此链接：它在我的chrome中工作。你在chrome中使用的是哪个版本？我的ubuntuI中有54.0 chrome版本，我在windows中使用55.0。它在chrome 55.0的windows中工作。我刚刚登录了一个同事的桌面。