<div id="wrap"> 
  <ul>
    <li>
      <div class="box box1">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
    <li>
      <div class="box box2">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
    <li>
      <div class="box box3">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
    <li>
      <div class="box box4">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
    <li>
      <div class="box box5">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
    <li>
      <div class="box box6">
        <p class="title">title</p>
        <p class="desc">desc</p>
      </div>
    </li>
  </ul>
</div>

#wrap{
  width: 100%;
}
ul{
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
li{
  position:relative;
  width: 300px;
  height: 300px;
  background-color: #ccc;
  margin-bottom: 20px;
  overflow:hidden;
}
.box{
  position: absolute;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  top:100%;
  left: 100%;
  opacity: 0.5;
}
li.active .box{
  opacity:1;
}
.box .title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  
}
.box1{
  background: gold;
}
.box2{
  background: green;
}
.box3{
  background: blue;
}
.box4{
  background: red;
}
.box5{
  background: grey;
}
.box6{
  background: yellow;
}

let target ;
let currentX,currentY;
let liTop, liLeft;
let liWidth = 300;
let liHeight = 300;
let topVal, leftVal;

$(document).on('mouseenter','li:not(.active)',function(e){
  target = $(this).children('.box');
  liTop = $(this).offset().top;
  liLeft = $(this).offset().left;
  currentX = e.pageX;
  currentY = e.pageY;
  topVal = currentY - liTop;
  leftVal = currentX - liLeft;
  
  if(topVal < 10){
    topVal = -200;
  } else if(topVal > liHeight){
    topVal = liHeight;
  }
  if(leftVal < 10){
    leftVal = -200;
  } else if(leftVal > liWidth){
    leftVal = liWidth;
  }
  $("li.active").css({
    top: topVal,
    left: leftVal,
  }).removeClass("active");
  $(this).addClass('active');
  
  target.css({
    top: topVal,
    left: leftVal,
  }); 
  
  target.animate({
    top: '75px',
    left: '75px',
  }, 200, function() {
    // Animation complete.
  });
  
});

$(document).on('mouseleave','li.active', function(e){
  target = $(this).children('.box');
  liTop = $(this).offset().top;
  liLeft = $(this).offset().left;
  currentX = e.pageX;
  currentY = e.pageY;
  topVal = currentY - liTop;
  leftVal = currentX - liLeft;
   if(topVal < 10){
    topVal = -200;
  } else if(topVal > liHeight){
    topVal = liHeight;
  }
  if(leftVal < 10){
    leftVal = -200;
  } else if(leftVal > liWidth){
    leftVal = liWidth;
  }
  $(this).removeClass('active');
  target.animate({
    top: topVal,
    left: leftVal,
  }, 200, function(){
    
  });
  
})