JSFiddle - React, Tailwind, and code Playground

by Anuj Kumar

HTML

<div>
    <img class="img-responsive" src="https://scontent-sin.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/s480x480/1422447_652362851561883_6567056488472624218_n.jpg?oh=25c00c99b4bfb37c79761bafa179fdc0&amp;oe=55E397ED" alt="'Breaking News! :3'" />
    <p class="title">I am the Title</p>
</div>

CSS

div{
    position:relative;
}
img{
    width:100%
}
p{
    position:absolute;
    top:20px;
    left:50px;
    color:red;
    font-size:40px;
    opacity:0;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    opacity:1
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

JavaScript

$("img").hover(function() {
            $("p").removeClass("fadeOutRight").addClass("animated fadeInLeft"); 
    }, function() {
       $("p").removeClass("fadeInLeft").addClass("fadeOutRight");  
});