JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="overlay">
        <div class="overlay-content">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="overlay-svg">
                <defs>
                    <pattern id="textpattern" patternUnits="userSpaceOnUse" width="400px" height="150px">
                        <image xlink:href="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/1970856_10152030148361239_1864148173_n.jpg" x="-9px" y="-2px" width="418px" height="154px" />
                    </pattern>
                </defs>
                <text class="title" x="20px" y="120px">test</text>
            </svg>
        </div>
        <img class="background" src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/1970856_10152030148361239_1864148173_n.jpg" />
         <h1 class="title">Test</h1>
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 400px;
    height: 150px;
    z-index: 1;
}
.background {
    width: 400px;
    height: 150px;
    position: absolute;
    z-index: 3;
    top: 0;
}
.overlay-content {
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 400px;
    height: 150px;
    -webkit-transition: all 1s linear;
    background-color: #000;
    opacity: 0.7;
}
.overlay {
    height: 150px;
}
.overlay:hover .overlay-content {
    height: 0;
}
text {
    fill:url(#textpattern);
}
.overlay-svg {
    box-sizing:border-box;
    background-clip: content-box;
}
.title {
    margin: 0;
    padding: 0px;
    font-size: 7em;
    font-weight: bold;
    position: relative;
    z-index: 5;
    text-transform: uppercase;
}