css3鼠标悬停滑动代码_仅CSS的滑动字幕悬停效果

您是否曾经需要构建一个UI，其中标题需要在悬停时在图像上滑动以显示更多内容？

这是我在整个职业生涯中一直以各种方式实施的任务。 这样做不是很困难：使用position: absolute将标题放置在图像上，然后将其向下转换，在悬停时将其转换回上一级–不要忘了overflow-y: hidden在包含元素上。

这是一个简单的实现：

演示地址

当需要在悬停前在图像上方“窥视”的部分覆盖物的高度不确定时，就会出现困难。 举例来说，如果您有一组团队成员，其中有些人的长名或职称会包裹在多行中，那么这很容易做到。