JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mb_heading"><h1><img src="http://tympanus.net/codrops/wp-content/uploads/2011/08/regular_litpub.jpg" /></h1></div>
<div class="mb_overlay"></div>

CSS

.mb_heading h1{
    position:absolute;
    font-size:86px;
    color:#000;
    text-shadow:0px 0px 1px #fff;
    font-family:"Astloch", Arial, sans-serif;
    z-index:4;
}
.mb_overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(http://www.datatransmission.co.uk/images/news/7760/TKOL.jpg) repeat top left;
    z-index:2;
}

JavaScript

$('.mb_overlay').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
        pic.next().addClass('h1');
        pic.insertAfter('.mb_overlay:last').removeClass('mb_overlay').show();
    });    
});