JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div class="bl cont1">bl1</div>
<div class="bl cont2">bl2</div>
<div class="bl object">bl3</div>

CSS

body {
    font-family: 'Anaheim', sans-serif;
    font-size: 13px;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #444;
    background-image: -webkit-radial-gradient(center, circle farthest-side, #444 0%, #222 100%);
    background-image:    -moz-radial-gradient(center, circle farthest-side, #444 0%, #222 100%);
    background-image:     -ms-radial-gradient(center, circle farthest-side, #444 0%, #222 100%);
    background-image:         radial-gradient(center, circle farthest-side, #444 0%, #222 100%);
}
a { text-decoration: none; }
.bl {
float: left;
height: 100px;
width: 100px;
background: white;
padding: 80px 0 0 80px;
margin: 10px;
   position:relative;
}
.object{background:#00ffff}

JavaScript

$('.object').css({ "top": '-180px' });
$(".cont1,.cont2").hoverIntent(mousein_triger , mouseout_triger, {timeout: 300});

function mousein_triger(){
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        $('.object').stop().delay(1000).animate({"top": "-180px"}, 1000);
}