JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://www.google.com.ph/search?q=image&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjQ87bl97vWAhVJJpQKHZQlCdsQ_AUICigB&biw=1536&bih=758#imgrc=TVEPc8yBbrThFM:" class="name" />
<img src="https://www.google.com.ph/search?q=image&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjQ87bl97vWAhVJJpQKHZQlCdsQ_AUICigB&biw=1536&bih=758#imgrc=lAHthDF3S1ACoM:" class="photo" />

CSS

.name {
     width: 270px;
     height: 77px;
     position: absolute;
     top: 0px;
     left: 600px;
     -webkit-transition: top 0.3s;
     -moz-transition: top 0.3s;
     -o-transition: top 0.3s;
 }
 .name:hover, .name.hover {
     top: 10px;
     -webkit-transition: top 0.3s;
     -moz-transition: top 0.3s;
     -o-transition: top 0.3s;
     font-size: 24px;
 }
 .photo {
     width: 270px;
     height: 310px;
     position: absolute;
     top: 77px;
     left: 600px;
     -webkit-transition: top 0.3s;
     -moz-transition: top 0.3s;
     -o-transition: top 0.3s;
 }
 .photo:hover, .photo.hover {
     top: 100px;
     -webkit-transition: top 0.3s;
     -moz-transition: top 0.3s;
     -o-transition: top 0.3s;
     font-size: 24px;
 }

JavaScript

$('.name').hover(function () {
    $('.photo').addClass('hover');
}, function () {
    $('.photo').removeClass('hover');
});

$('.photo').hover(function () {
    $('.name').addClass('hover');
}, function () {
    $('.name').removeClass('hover');
});