LZERO LZERO - 15 days ago 11
CSS Question

Hover effect on background image

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

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