JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://modernizr.com/downloads/modernizr-2.6.2.js"></script>
<h1><span>This</span></h1>

CSS

body {
    background: #ccc;
}
h1 {
    background: white;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    width: 100%;
    max-width: 960px;
    margin: 5% auto;
}
.backgroundclip h1 span {
    background: url(http://i.imgur.com/Tzl9Kml.jpg) center center no-repeat;
    text-align: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}
h1 span {
    width: 100%;
    max-width: 960px;
    font-size: 140px;
    line-height: 160px;
    font-family: sans-serif;
    text-transform: uppercase;
    display: block;
    color: #ccc;
}

JavaScript

// Borrowed from CSS Tricks - http://css-tricks.com/image-under-text/
Modernizr.addTest('backgroundclip', function () {
    var div = document.createElement('div');

    if ('backgroundClip' in div.style) return true;

    'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g, function (val) {
        if (val + 'BackgroundClip' in div.style) return true;
    });

});


// Borrowed from Nick Craver - http://stackoverflow.com/questions/2771789/changing-text-periodically-in-a-span-from-an-array-with-jquery#answer-2772278
var terms = ["This", "is", "Hawaii"];
function rotateTerm() {
  var ct = $("h1 > span").data("term") || 0;
  $("h1 > span").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct])
              .fadeIn().delay(600).fadeOut(600, rotateTerm);
}

$(rotateTerm);