JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imagethumbnailleft">
    <div class="thumbtitle-box"><h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3></div></div>
    
    <h2>ARTFUL DODGER TRADING COMPANY</h2><h3>- Illustrated playing card series -</h3>

CSS

.animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

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

JavaScript

$(document).ready(function() {
    
    $(".imagethumbnailleft  h2, .imagethumbnailleft  h3").hover(function(){
        animationHover(this,this,'zoomIn');
    });

    var animationHover = function(trigger, element, animation){
    element = $(element);
    trigger = $(trigger);
    trigger.hover(
        function() {
            element.addClass('animated ' + 'zoomIn');          
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);           
        });
}

});