jquery - 如何在悬停div从侧面滑入时实现鼠标悬停效果

当瓷砖悬停时，似乎半透明的div从鼠标输入的边缘滑过瓷砖。我认为可以使用单个div，但我不确定如何通过查看页面源来实现它。

我对html和css非常好，但我的jQuery非常基本。我知道这有点开放，但对所涉及的技术的简要解释会有所帮助。

编辑：考虑一下，如果不仔细研究页面源代码，我认为这种方法可能会起作用：

每个瓷砖都有自己的半透明叠加子div，上面有标题等。
每个叠加div位于tile div之外的某个位置。磁贴具有overflow:hidden
当鼠标悬停div时，我使用jQuery来确定鼠标输入的哪一侧（如何？）
然后我将css类应用于overlay div： top ， bottom ， left 或 right 。 CSS将启动以立即将叠加div放置在tile div的相应边缘之外。
然后jQuery使用动画抵消叠加div，将其移动到平铺上方。

图块将是动态调整大小的，因此需要jQuery来根据图块大小重新定义偏移量。