JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<div class="masthead"> 
    <img class="masthead__img full-width full-height" src="http://dummyimage.com/600x400/ff0/333">
    <div class="masthead__overlay">

    </div>
                <div class="masthead__lead">
            <h1>Some text</h1>
            <p>Yes baby Other interesting text really long text t show what happens</p>
            <p>Other interesting text</p>
        </div>
    
</div>

CSS

* {
    box-sizing:border-box;
}

body {
    padding: 50px;
    background-color: #eee;
    overflow:hidden;
}

.masthead {
    position: relative;
    height: 80%;
    width: 100%;
    background-color: pink;
    position: relative;
    border: 1px solid red;
    min-height:300px;
 
    
}
.masthead__img {
   position: absolute;
   left: 50%;
   top: 50%;
   -ms-transform: translateY(-50%) translateX(-50%);
   -webkit-transform: translateY(-50%) translateX(-50%);
   transform: translateY(-50%) translateX(-50%);
}
.masthead__overlay {
    content:"";
background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:50%; 
    width: 50%;
    display:block;
    vertical-align: middle;
}

.masthead__lead {
  position: absolute;
  top: 50%;
    left:20px;
    right: 50%;
      -ms-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   display: inline-block;
    border: 1px solid #000;
    background-color: rgba(255,255,255,0.5);
}


img {
    opacity:0.7;
}

.full-width {
    min-width: 100%;
}

.full-height {
    min-height: 100%;
}

JavaScript

// Center Image within Parent even if image is larger than parent container
// add gradient styling