Hover effect on background image - css

Question

I've added a black transparency to appear when they hover on a background image on my site. I have a h2 tag which also appears on the hover but sits behind the dark transparency where as I want it on top of it! Is there a solution to this?
<div class="img-option">
<div class="content">
<h2>example<\h2>
<\div>
<\div>
CSS:
.img-option
Background image Position relative Background repeat no repeat Background Size cover .img-option:hover Filter: brightness (.6)
Thanks

Answer 1

.img-option {
background-image: url(https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg);
position: absolute;
height: 200px;
width: 400px;
}
.img-option:after,
h2:before {
position: absolute;
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.img-option:after {
content: '';
opacity: 0;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
}
h2:before {
content: attr(data-content);
top: 60%;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 2% 3%;
border: solid #000000 1px;
background-color: #ffffff;
}
.img-option:hover:after {
opacity: 1;
}
<div class="img-option">
<div class="content">
<h2 data-content="example"></h2>
</div>
</div>

Answer 2

You would need to assign a z-index to your <h2> element.
z-index: 1;
You can find out more about the the z-index property here.

Answer 3

add .img-option:before element and add style position:absolute and adjust the height like below.
DEMO:-
.img-option {
overflow: hidden;
}
.img-option h2 {
margin: 0;
padding: 20px;
}
.img-option:before {
content: '\00a0';
font-size: 1.5em;
width: 100%;
z-index: 100;
padding: 20px;
overflow: hidden;
position: absolute;
opacity: 0;
overflow: visible;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
position: absolute;
}
.img-option:hover:before {
opacity: 1;
background-color: rgba(0, 0, 0, 0.7);
}
<div class="img-option">
<div class="content">
<h2>example</h2>
</div>
</div>