JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background" style="background:url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg) center top; background-size:cover;">
</div>

<div class="conteneur">
<p>Description <br/> Une feuille <br/> sur le ciment</p>
</div>

<a class="name" href="something.html"> Lien quelconque restant toujours clair </a>

CSS

.name{
    position: absolute;
    top: 5%;
    right: 5%;
    text-decoration: none;
    color: white;
    z-index:2;
}

.background{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 5px solid yellow;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.conteneur{
    display: table;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 5px solid yellow;
    height: 100%;
    width: 100%;
    z-index: 1;
}

p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
    font-size: 20px;
    z-index: 2;
}

.background, p{
    cursor: pointer;
    -webkit-transition: all 1s linear;
            transition: all 1s linear;
}

.floutage{  
    -webkit-filter: blur(50px);
    filter: blur(50px);
    opacity:0;
    filter: alpha(opacity=0);
}

.background-floutage{
    -webkit-filter: blur(5px);
}

JavaScript

$(".background").on("click", function(){
    $(this).toggleClass("background-floutage");
    $(".conteneur").toggleClass("floutage");
});