JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://izaak.jellinek.com/tuxes/images/BabyTuxSit.png">>
<p>Lorem Ipsum Dolor Sit Amet...</p>
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;}
}
JavaScript
var elements = $('img, p'); // selectionne image et texte
elements.click($.fn.fadeToggle.bind(elements));