function closestEdge(x,y,w,h){
var topEdgeDist = distMetric(x,y,w/2,0);
var bottomEdgeDist = distMetric(x,y,w/2,h);
var leftEdgeDist = distMetric(x,y,0,h/2);
var rightEdgeDist = distMetric(x,y,w,h/2);
var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
switch (min){
case leftEdgeDist:
return 4;
case rightEdgeDist:
return 2;
case topEdgeDist:
return 1;
case bottomEdgeDist:
return 3;
}
}
function distMetric(x,y,x2,y2){
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
$(".box").hover(
function(event){
var el_pos = $(this).offset();
var edge = closestEdge(event.pageX - el_pos.left, event.pageY - el_pos.top, $(this).width(), $(this).height());
if(edge == 1) var iTop = "-100%", iLeft = "0";
if(edge == 2) var iTop = "0", iLeft = "100%";
if(edge == 3) var iTop = "100%", iLeft = "0";
if(edge == 4) var iTop = "0", iLeft = "-100%";
$("a", this)
.css({
"transition":"none",
"left": iLeft,
"top": iTop
});
$this = $(this);
setTimeout(function(){
$("a", $this)
.css({
"transition":"",
"left": "0",
"top": "0"
});
}, 10);
}, function(event){
var el_pos = $(this).offset();
var edge = closestEdge(event.pageX - el_pos.left, event.pageY - el_pos.top, $(this).width(), $(this).height());
if(edge == 1) var fTop = "-100%", fLeft = "0";
if(edge == 2) var fTop = "0", fLeft = "100%";
if(edge == 3) var fTop = "100%", fLeft = "0";
if(edge == 4) var fTop = "0", fLeft = "-100%";
$("a", this)
.css({
"left": fLeft,
"top": fTop
});
}
);
.box{
margin: 15px;
width: 200px;
height: 200px;
display: inline-block;
position: relative;
overflow: hidden;
}
.box img{
width: 200px;
height: 200px;
}
.box a{
background-color: rgba(255, 255, 255, .8);
position: absolute;
width: 200px;
height: 100%;
transition: all 300ms ease;
}
.box a h4{
color: #fff;
background: #000;
padding: 10px 15px;
top: 50%;
left: 50%;
display: block;
margin: 0 auto;
transform: translate(-50%, -50%);
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
<a href="#"><h4>Titulo 1</h4></a>
</div>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
<a href="#"><h4>Titulo 2</h4></a>
</div>
<br>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
<a href="#"><h4>Titulo 3</h4></a>
</div>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
<a href="#"><h4>Titulo 4</h4></a>
</div>