How do I create the effect similar to this site: link
When you hover over the div containing the image of the project, another div appears on the same side as the mouse.
That is, if you move your mouse over the right the div will enter on the right, if you pass to the left it will enter from the left.
This effect is produced by the DirectionAwareHoverEffect plugin.
How to use:
$('#da-thumbs > li').hoverdir();
// ou com opções
$('#da-thumbs > li').hoverdir({hoverDelay: 75, hoverElem: '.elem'});
Standard options:
defaults: {
speed: 300, // Tempo em milissegundos
easing: 'ease',
hoverDelay: 0, // Tempo em milissegundos
inverse: false,
hoverElem: 'div'
}
If you want to do it yourself, you can access the source code at GitHub .
A form without the use of plugins, which is nothing more than code to load.
Note that with very little code you can get the expected effect.
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><divclass="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><ahref="#"><h4>Titulo 1</h4></a>
</div>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><ahref="#"><h4>Titulo 2</h4></a>
</div>
<br>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><ahref="#"><h4>Titulo 3</h4></a>
</div>
<div class="box">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"><ahref="#"><h4>Titulo 4</h4></a>
</div>