Darken a background image without affecting the Text

I am almost there, but the text inside the a-tag should not be affected by the semi-transparent overlay:

The text should be bright white, regardless if you hover over the image or not.

I can add more html elements if necessary, but I would like to keep it to the minimum.

There is a new element added with:

.tint:before

which has a semi transparent background:

background: rgba(0,0,0, 0.5);

But the "before" element is over the text inside the a-element too and makes it dark.

Can this be solved with z-index ordering?

Thank you! Chris

Solution

This can easily be solved by ordering the stacking order of your elements correctly. Note the use of relative positioning on the text content.

.block {
  display: inline-block;
  color: #fff;
  position: relative;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.block:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: all .2s linear;
}

.block:hover:before {
  background: none;
}

.block h2,
.block p {
  position: relative;
}

<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
  <h2>Dogs are great sleepers</h2>
  <p>Mine can sleep all day long</p>
</a>


<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
  <h2>Dogs are great sleepers</h2>
  <p>Mine can sleep all day long</p>
</a>