Hero Overlay

hero-overlay.markdown

Hero Overlay

A Pen by George James on CodePen.

License.

index.pug

div.hero
  div.overlay
    div.info
      h1 Welcome to our site
      h4 Discover ways to find your dream jobs
      p div Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, nostrum. Molestias, reiciendis aut. Nobis iure vero dolorem omnis aut nemo. Cupiditate omnis expedita aliquam, commodi autem suscipit cumque soluta delectus.

style.stylus

html 
  height: 100%
  min-height: 200px;
body
  font: 14px Helvetica, Arial, sans-serif
  height: 100%;
  position:relative;
  
.hero 
  height: 100%
  min-height: 500px
  text-align: center
  background: url(https://media.architecturaldigest.com/photos/571e97c5741fcddb16b559c9/master/pass/modernist-decor-inspiration-01.jpg) no-repeat
  background-size: cover
  position: relative;
  .overlay
    background: rgba(0,0,0,0.4)
    height: 100%
    width: 100%
    position: absolute
    color: #FFF
  
  .overlay .info 
    min-height: 50%
    width: 50%
    margin: 0 auto
    position: relative
    top: 50%
    transform: translateY(-50%);
    
    h1 
      font-size: 3em
      margin-top: 0
      margin-bottom: 40px
    h4
      margin-top: 0
      margin-bottom: 40px
      font-size: 1.5em
      
    p 
      line-height: 2
      text-transform: uppercase