JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item">
    <a href="#">
      <img src='http://chebureks.ru/tests/img/bg_active.png'  width="150" height="150">
      <span> текст </span>
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src= 'http://chebureks.ru/tests/img/bg_active.png'  width="150" height="150">
      <span> текст </span>
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src='http://chebureks.ru/tests/img/bg_active.png'  width="150" height="150">
      <span> текст </span>
    </a>
  </div>
</div>

CSS

*{
      margin: 0;
      padding: 0;
    }
    .items{
      margin: 100px;
      position: relative;
    }

    .item{
      position: relative;
      float:left;
      padding: 0;
    }

    a{
      position: relative;
      display: block;
      width: 200px;
      height: 200px;
      text-align: center;
    }

    a img{
      position: absolute;
      left: 50%;
      margin-left: -75px;
      top:50%;
      margin-top: -75px;
      padding: 0;
    }
    a span{
      position: relative;
      top:50%;
    }

JavaScript

$(function(){
      $('a').on({
        mouseenter:function(e){
          e.preventDefault();
          $(this).addClass('active');
          $(this).find('img').animate({
            width:'200px',
            height:'200px',
            left:'50%',
            marginLeft:'-100px',
            top:'50%',
            marginTop: '-100px'
          }, 400);

        },
        mouseleave:function(e){
          $(this).find('img').animate({
            width:'150px',
            height:'150px',
            left: '50%',
            marginLeft: '-75px',
            top:'50%',
            marginTop: '-75px'
          }, 400, function(){
            $(this).removeClass('active')
          });
        }
      });
    });