Alex.prog.1994,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
width: 90vw;
height: 90vh;
background-color: #8A2BE2;
}
.test{ margin: 0;
top: 100px; left: 100px;
height: 100px; width: 100px; opacity: .4; background-color: #DBDBDB; position: absolute;
}
.hot{ overflow: hidden;
padding: 0
border: 1px dashed Gray; height: 100px; width: 100px; margin: 100px;
background-image: url(http://img-fotki.yandex.ru/get/5306/102699435.2e4/0_6a606_5fdbe51b_S.jpg);
background-size: 100px 100px;
background-repeat: no-repeat;
position: relative;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var hot = $(".hot");
hot.on("mouseenter", function(e) {
var pos = $(this).offset(),
h = $(this).height(),
w = $(this).width();
var x = e.pageX - pos.left - w / 2;
var y = e.pageY - pos.top - h / 2;
var from = Math.abs(x) > Math.abs(y) ? x > 0 ? {
top: 0,
left: w
} : {
top: 0,
left: -w
} : y > 0 ? {
top: h,
left: 0
} : {
top: -h,
left: 0
};
$("div", this).stop(true, true).css(from).animate({
top: 0,
left: 0
}, 800)
}).on("mouseleave", function(e) {
var pos = $(this).offset(),
h = $(this).height(),
w = $(this).width();
var x = e.pageX - pos.left - w / 2;
var y = e.pageY - pos.top - h / 2;
var to = Math.abs(x) > Math.abs(y) ? x > 0 ? {
left: w
} : {
left: -w
} : y > 0 ? {
top: h
} : {
top: -h
};
$("div", this).stop(true, true).animate(to, 500)
})
});
</script>
</head>
<body>
<div class="hot"><div class="test"></div></div>
</body>
</html>