Css 背景图像的悬停效果

我已经添加了一个黑色的透明度，当他们在我的网站上的背景图像上悬停时会出现。我有一个h2标签，它也出现在悬停上，但它位于黑色透明的后面，我希望它在上面！有解决办法吗

<div class="img-option"> 
    <div class="content"> 
        <h2>example<\h2> 
    <\div>
<\div> 

谢谢

.img选项{
背景图片：url(https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg);
位置：绝对位置；
高度：200px；
宽度：400px；
}
.img选项：之后，
h2：之前{
位置：绝对位置；
过渡：均为0.2s；
-webkit转换：所有0.2秒；
}
.img选项：之后{
内容：''；
不透明度：0；
排名：0；
左：0；
背景色：rgba（0,0,0,0.1）；
宽度：100%；
身高：100%；
}
h2：之前{
内容：attr（数据内容）；
最高：60%；
z指数：1；
框大小：边框框；
-moz框大小：边框框；
填充物：2%3%；
边框：实心#000000 1px；
背景色：#ffffff；
}
.img选项：悬停：之后{
不透明度：1；
}

---

您需要为

元素分配一个z索引

z-index: 1;

---

您可以找到有关z-index属性的更多信息。

添加

。img选项：在

元素之前，添加样式

位置：绝对

，并调整高度，如下所示

演示：-

.img选项{
溢出：隐藏；
}
.img选项h2{
保证金：0；
填充：20px；
}
.img选项：之前{
内容：'\00a0'；
字号：1.5em；
宽度：100%；
z指数：100；
填充：20px；
溢出：隐藏；
位置：绝对位置；
不透明度：0；
溢出：可见；
框大小：边框框；
过渡：所有0.4缓进缓出；
位置：绝对位置；
}
.img选项：悬停：之前{
不透明度：1；
背景色：rgba（0,0,0,0.7）；
}

实例

请添加相关的HTML和CSS，您可以使用jsfiddle.net或类似工具来显示问题。示例CSS:.img选项背景图像位置相对背景重复无重复背景大小封面。img选项：悬停过滤器：亮度（.6）所有工作正常谢谢！除了悬停时的透明度外，悬停会使白色h2和灰白色，所以它仍然在其上应用透明度？

z-index: 1;