JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="teaserboxen">
<div class="image">
<img src="https://webutex.info/download/an6isl7de0j5bu00va1n1n59aoc/webutex-diana-gross.jpg" alt="Diana Groß" title="Diana Groß">

</div>
			<div class="inner" style="bottom: -280px;">
				
					<h2 class="title">
						
							Diana Groß
						
                   <span class="titlesecond">

                        Sales Service

               </span>
					</h2>
				
				
				<p class="text">
					</p><p><span style="color: #ff0000;">&nbsp; tel</span>&nbsp;&nbsp; <br>&nbsp; <span style="color: #000000;"><a href="tel:+4994619147025"><span style="color: #000000;">+49 (0) 9461 / 914 70 25</span></a></span></p><p><br><span style="color: #ff0000;">&nbsp; fax</span> &nbsp; <br>&nbsp; +49 (0) 9461 / 914 70 40</p><p><br>&nbsp; <span style="color: #ff0000;">mail</span>&nbsp;&nbsp; <br>&nbsp; <a href="mailto:[email protected]"><span style="color: #000000;"><span style="color: #000000;">[email protected]</span></span></a></p><p><br><span style="font-size: small;"><span style="color: #000000;"><span style="color: #000000;">&nbsp;&nbsp;<img src="http://webutex.info/filesystem%2FD568c80bbX14fb65a9d88XY2dd6%2Fsprache_deutsch.png%26nocache%3Dtrue" alt="" width="25" height="25">&nbsp; <img src="http://webutex.info/filesystem%2FD568c80bbX14fb65a9d88XY2c08%2Fsprache_englisch.png%26nocache%3Dtrue" alt="" width="25" height="25"> </span></span></span></p><p style="padding-left: 30px;">&nbsp;</p>
				<p></p>
				
				
				  </div>
  </div>

CSS

.teaserboxen {
    background: #e5e5e5;
    height: 500px;
    position: relative;
}

.wrap {
    width: 100px;
    height: 100px;
    background: yellow;
    position: absolute;
    top: 320px;
}

JavaScript

$(".wrapholder").hover(function(){
    $(".wrap").stop().animate({top:"-=320px"},1000, 'easeOutQuint');
}, function(){
    $(".wrap").stop().animate({top:"+=320px"},1000, 'easeOutQuint');
});