Hero Inline Image with Heading floated on Top

heroNOTE: Remove the pre tags before using


<div class="wrapper">
    <img src="/files/hep/files/hp-hero-img.jpg?m=1541545641">

<div class="headline">

        For everyone in our community, at every stage and place in life

        <a href="programs" title="">Learn More</a>


.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