JSFiddle - React, Tailwind, and code Playground

HTML

<div class="transition-floue">
    <img src="http://izaak.jellinek.com/tuxes/images/BabyTuxSit.png"/>
    <p class="floutage">Description de la première image</p>
</div>     

    <br /><br />    
    
<div class="transition-floue">    
    <img src="http://izaak.jellinek.com/tuxes/images/BabyTuxSit.png"/>
    <p class="floutage">Description de la seconde image</p>
</div>

CSS

.transition-floue p{
    top: 200px;
    left: 200px;        
}

.transition-floue img{
    width: 25%;
    top: 200px;
    left: 250px;    
}

.transition-floue p, img {
    transition: all 1s linear;
}

.transition-floue .floutage{  
    -webkit-filter: blur(20px);
    opacity:0;
}

JavaScript

$(".transition-floue").on("click", function(){ 
    $(this).children().toggleClass("floutage");
});