JSFiddle - React, Tailwind, and code Playground

HTML

<a class="item" href="#" title="link">
    <h2>Textinhalt</h2>
    <img src="http://placehold.it/400x400" alt="bild" />
</a>

CSS

* {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
	height: auto;
	width: auto\9;
}

a { text-decoration: none; }

.item {
    display: table;
    position: relative;
}

.item h2 {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    
    transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-o-transition: all .2s linear;

    background: #efefef;
    display: table-cell;
    font: italic lighter 1em georgia, serif;
    height: 100px;
    line-height: 100px;
    margin: auto;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    text-align: center;
    width: 100px;
}

.item:hover > h2 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
    filter: alpha(opacity=1);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;    
}

@media only screen and (min-width: 400px){
    .item h2 {
        font-size: 1.3em;
        height: 150px;
        line-height: 150px;
        width: 150px;
    }
}