JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Damion"></script>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/1.jpg">
<div class="overlay"></div>
    <div class="text"><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>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/2.jpg">
<div class="overlay"></div>
    <div class="text"><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>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/4.jpg">
<div class="overlay"></div>
    <div class="text"><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>

<div class="content" data-img="http://tympanus.net/Development/ThumbnailGridAnimations/img/5.jpg">
<div class="overlay"></div>
    <div class="text"><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

body {
    font-family: 'Damion', cursive;
}

.content {
position:relative;
width:300px;
height:300px;
float:left;
margin:20px;
background:#853256;
}

.text {
position:absolute;
width:250px;
color:#FFFFFF;
top:50%;
left:50%;
margin-left:-125px;
text-shadow: 2px 2px 2px black;
}

.overlay {
position:absolute;
width:100%;
height:100%;
background:#000000;
opacity:0;
}

JavaScript

$(document).ready( function() {
    $('.content').each( function() {
        var $this = $(this);
        var img = $this.attr('data-img');
        $this.css({'background':'url('+img+') no-repeat center center','background-size':'cover'}); 
    });
    
    $('.text').each( function() {
        var $this = $(this);
        $this.css({'margin-top':'-'+ ($this.height() / 2) + 'px'}); 
    });
    
    $('.content').hover(
        function(){
            $(this).find('.overlay').stop().animate({'opacity':0.7}, 200)
        },
        function(){
        $(this).find('.overlay').stop().animate({'opacity':0}, 200)
        });
    
    
});