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

  • Post author:
  • Post category:其他


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


A grid of 4 items, with content revealed on hover


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

position: absolute

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

overflow-y: hidden

在包含元素上。

这是一个简单的实现:


演示地址

当需要



悬停



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


A grid of 4 items, with content revealed on hover


将覆盖层转换为固定长度可能会导致某些文本被剪切。 您可以使用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/