JSFiddle - React, Tailwind, and code Playground

HTML

<div id="e1">
  <h1>Header</h1>
  <div id="main">text text text text</div>
  <div id="footer">something</div>
</div>

CSS

#e1 h1 { position:relative; z-index:99; height:50px; }
#main { position:relative;  z-index:99; height:50px; background-color:#fff; }
#footer { position:absolute; z-index:1; height:150px; top:0; padding-top:100px; }

#footer:hover { background: url(http://jsfiddle.net/img/top-bg.png) repeat-x; }