如何实现平滑，方向感知的悬停效果？

Question

基于CodePen上的这个演示，我必须实现类似的东西，但只是水平。 My demo完全没有CodePen演示所具有的“缓动”动画。

我已经从左侧开始使用悬停效果（但它不是很平滑）。但是，从右边开始，内容不会改变。如何通过从任意一侧水平移动光标来更改内容？

 $("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });

 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left - 100
     });
 });

.da-thumbs {
    list-style: none;
    margin:20px;
    display:inline-block;
    overflow:hidden;
    width:400px;
    padding:0;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 0px;
    position: relative;
    z-index: 0;
}
.da-thumbs li a {
    display: block;
    position: relative;
    text-decoration: none;
}
.da-thumbs li a div {
    display:none;
    position: absolute;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>POD ONE</span></div>
    </a>

    </li>
    <li><a href="">
      <div><span>POD TWO</span></div>
    </a>

    </li>
</ul>