博客

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

这是我在整个职业生涯中一直以各种方式实施的任务。 这样做不是很困难：使用

position: absolute

将标题放置在图像上，然后将其向下转换，在悬停时将其转换回上一级–不要忘了

overflow-y: hidden

在包含元素上。

这是一个简单的实现：

演示地址

当需要

在

悬停

前

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

将覆盖层转换为固定长度可能会导致某些文本被剪切。 您可以使用Javascript检测字幕标题的高度，并相应地设置

transform

属性。 但是我们仅凭CSS就能令人满意地解决这个问题。

首先，我们将整个叠加层向下转换100％：

.item{
  position: relative ;
}

.item__overlay{
  position: absolute ;
  width: 100% ;
  height: 100% ;
  top: 0 ;
  left: 0 ;
  transition: transform 300ms ;
  transform:translate3d( 0 , 100% , 0 );
}

我们还将字幕标题（将“窥视”图像的部分）转换了100％。 现在，它可以像我们最初希望的那样窥视。 请注意，我们还要在覆盖图和标题上同时设置

transition

属性，使其具有相等的持续时间，这将有助于使过渡感觉平滑：

.item__caption-title{
  transition: transform 300ms ;
  transform:translate3d( 0 , -100% , 0 );
}

我们还需要设置悬停和焦点过渡状态。 对于这些卡，我使用的是绝对定位的锚链接，以使整个卡都可以悬停。 悬停时，叠加层和字幕标题都重新设置为其原始位置。 我还包括焦点样式，以确保可以为非鼠标用户切换字幕：

.item__overlay a:hover ~ .item__overlay,
.item__overlay a:focus ~ .item__overlay,
.item__overlay a:hover ~ .item__overlay .item__caption-title,
.item__overlay a:focus ~ .item__overlay .item__caption-title{
  transform:translate3d( 0 , 0 , 0 );
}

这已经很好地工作了。 但是为了增加画龙点睛的效果，让我感觉更平滑一点，我喜欢过渡字幕主体的不透明度，增加一点延迟，以便仅在字幕过渡到大多数方式后才出现：

.item__body{
  opacity: 0 ;
  transition: opacity 500ms 100ms ;
}

.item__overlay a:hover ~ .item__overlay .item__body,
.item__overlay a:focus ~ .item__overlay .item__body{
  transform:translate3d( 0 , 0 , 0 );
}

这是带有完整示例的演示：

演示地址

翻译自:

https://css-irl.info/css-only-slide-up-caption-hover-effect/