JSFiddle - React, Tailwind, and code Playground

HTML

<span class="block"><h1>post name</h1></span>

CSS

.block {
    display: table;
    width: 25%;
    margin: 0;
    padding: 0;
    float: left;
    height: 250px;
    width:250px;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
        background:white url(http://img.gawkerassets.com/img/17twy6q7m9o2ljpg/medium.jpg)no-repeat center;
    background-position: center;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.block h1 {
    font-size: 2.2rem;
    text-decoration: none;
    vertical-align: middle;
    font-weight:bold;
    display: table-cell!important;
    padding: 0 20px;
}

.block:hover {
   webkit-text-fill-color: transparent;
    -webkit-background-clip: none;
}

.block:hover h1 {
    cursor: pointer;
    display: table-cell;
    text-shadow:0px 0px 0px white;
    color:black;
}