Hero Inline Image with Heading floated on Top

heroNOTE: 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%);
}

See also: Layout