NOTE: Remove the pre tags before using
<pre>
<div class="wrapper">
<img src="/files/hep/files/hp-hero-img.jpg?m=1541545641">
<div class="headline">
<h3>
For everyone in our community, at every stage and place in life
</h3>
<h4>
<a href="programs" title="">Learn More</a>
</h4>
</div>
</div></pre>
.wrapper {
position: relative;
overflow: hidden;
width: 100%;
z-index: 1;
max-height: 520px;
margin-top: -74px;
}
.headline {
width: 60%;
text-align: center;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
padding: 30px;
color: #fff;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.wrapper img {
-webkit-filter: brightness(60%);
filter: brightness(60%);
}