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>