JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div><h2>titre de la news</h2>texte supplementaire de test pour un contenu adaptable et centré.texte supplementaire de test pour un contenu adaptable et centré
    </div>    
</div>

CSS

.content {
    display: table;
    width: 300px;
    height: 300px;
    background: url(http://tympanus.net/Development/ThumbnailGridAnimations/img/1.jpg) no-repeat center;
    background-size: cover;
}

.content div {
    display: table-cell;
    vertical-align: middle;
    padding: 25px;
    text-shadow: 2px 2px 2px #000;
    font: 100% cursive;
    color: #fff;
    transition:background .4s ease;
}

.content:hover div {background: rgba(0,0,0,.5);}