JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    
    var img = $('img'),  // selectionne image
    text = $('p');  // selection le texte
    
    text.hide();
    
    img.click(function(){
        img.toggleClass("floutage");
        img.hide();
        text.show();
        text.toggleClass("defloutage");
    });
    
    text.click(function(){
        text.toggleClass("floutage");
        text.hide();
        img.show();
        img.toggleClass("defloutage");
    });
});
</script>
</head>
<body>

    <img src="http://izaak.jellinek.com/tuxes/images/BabyTuxSit.png">>
    <p>Lorem Ipsum Dolor Sit Amet...</p>

</body>
</html>

CSS

p{
    position: absolute;
    top: 200px;
    left: 200px;
    display: none;
}

img{
    position: absolute;
    width: 25%;
    top: 200px;
    left: 250px;    
}


.floutage{  
    -webkit-animation: floutage 1s linear 0s forwards;
}

@-webkit-keyframes floutage {
    0%   {}
    100%  {-webkit-filter: blur(20px); opacity:0;}
}

.defloutage{  
    -webkit-animation: defloutage 1s linear 0s forwards;
}

@-webkit-keyframes defloutage {
    0%   {-webkit-filter: blur(20px); opacity:0;}
    100%  {-webkit-filter: blur(0); opacity:1;}
}