JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bodycontainer">
	<div id="kim">
        <div id="dance" class="dancingkim">
        <div class="header">
    		<h2 class="introheader">Hover original</h2>
        </div>
            <img src="http://placehold.it/240x208" />
    </div>
	</div>

CSS

body {
	background-color: #000;
}

.bodycontainer {
	max-width:100%;
	width: 1200px;
	max-height: 600px;
}
.hoverdown {
    margin-top: 30%;
}
.dancingkim {
  height: 270px;
  min-height: 270px;
  max-height: 270px;
  min-width:208px;
  max-width:208px;
  width:208px;
  text-align: center;
  margin-left: 40%;
  margin-right: 40%;
}

.hoverleft {
    margin-left:0%;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.hoverleft h2 {
    margin-left: 0%;
}

h2.introheader {
	text-decoration: underline;
	color: #fff;
    text-align:center;
}

JavaScript

$('#kim').hover(function(){
	$(".header h2").text("Hover text");
	});
	$('#kim').hover(function(){
		$(".dancingkim").css("cursor", "pointer");
	});

$('.dancingkim').hover(function(){
    $(this).addClass("hoverleft");
    $(this).removeClass("dancingkim");
});

$('#kim').on('hover', '.hoverleft', function() {
    $('#dance').addClass("hoverdown");
    $('#dance').removeClass("hoverleft");
});