滑动图像标题

读者Jason Lucchesi向我发送了一个生动的图像标题演示，该图像标题在翻转时在图像上方滑动。 该效果使用了一堆嵌套的div来完成，所以我想我将使用标准HTML5结构为带有标题的图像制作自己的版本，并对其进行CSS3处理。

查看演示 下载文件

为什么要做这样的事情？ 也许可以节省布局中的空间。 字幕本身可能分散了特定设计的注意力，只在有条件的情况下显示字幕比较干净。 我不知道，这只是一个演示。 如果您不喜欢它，请不要使用它。

HTML5结构

这里没有什么，只有带有标题的图像的纯语义标记。

<figure>
	<img src="yay.jpg" alt="">
	<figcaption>
		yay!!!
	</figcaption>
</figure>

CSS结构

figure元素包装了所有内容，是我们的基本构建块。 授权的概念从这里开始。 该figure将需要具有以下position: relative; 因此我们可以将字幕绝对准确地定位在我们想要的位置，而不会占用任何额外的空间。 我们还需要overflow: hidden; 因此，当我们滑动时，标题消失在figure边界之外。

figure { 
  display: block; 
  position: relative; 
  overflow: hidden; 
}

figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 
}

热滑动作

我们需要隐藏标题，以便在图像翻转时可以热滑动的方式显示它们。 让我们将标题稍微放在左下角之外，并完全隐藏起来。 然后，当图形悬停时，我们将其滑动到位并重新调整不透明度。 为了使其实际滑动，我们将使用transition 。

figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 

  opacity: 0;
  bottom: 0; 
  left: -30%;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}

figure:hover figcaption {
  opacity: 1;
  left: 0;
}

选项，选项

在演示中 ，每个图像上的位置和方向滑动都不同。 我们只是通过在图中添加类名称并根据类来定位不同的东西来做到这一点。

<figure class="cap-top">

.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }

那么，人们怎么知道根本没有字幕呢？

如果您要麻烦一些字幕，那么如果没有迹象表明它们还在那里，那就太可惜了（阅读：UX FAIL）。 让我们用一个细微的问号指示符指示字幕的存在。 与其使用非语义的额外标记来执行此操作，不如使用图形上伪元素形式的生成内容。

figure:before { 
  content: "?"; 
  position: absolute; 
  background: rgba(255,255,255,0.75); 
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  /* Only Fx 4 supporting transitions on psuedo elements so far... */
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  opacity: 0.75;	
}
figure:hover:before {
  opacity: 0;
}

请注意，尽管position: absolute;上面CSS上没有定位值position: absolute; 。 职位将取决于我们设置的期权类别。 您可能希望将问号放在标题滑入的角落。 像这样：

.cap-left:before {  bottom: 10px; left: 10px; }

用法

与在此站点上找到的任何内容一样。 请把它用在当下很好的地方。 最好是在大型花式公司项目中，您告诉老板这就是您的全部想法，并且会得到很大的加薪。

翻译自: https://css-tricks.com/slide-in-image-captions/