Move div while hovering

Question

How I create the effect similar to this site: http://www.amgrconstrucoes.com.br/lancamento

When passing the mouse over the div that contains the image of the enterprise appears another div on it by the same side that was passed the mouse.

That is, if you pass the mouse by the right the div will enter by the right, if you pass by the left it will enter by the left.

Answer 1

This effect is produced by the plugin Directionawarehovereffect.

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 on Github.

Answer 2

A form without use of plugins, which is nothing more than code to be loaded.

Note that with very little code it is possible to 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>
<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>