JSFiddle - React, Tailwind, and code Playground

HTML

<img class="iconeslide" src="http://i.imgur.com/CaSWOIA.png"/>

CSS

.iconeslide {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
   opacity: 0.4;
} 

.iconeslide:hover {
    opacity: 1.0;
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
    animation-duration: 500ms;
}

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

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

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

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