图片滑入式标题

读者 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; 
}

热滑动操作

我们需要隐藏标题，以便在鼠标悬停在图片上时，通过热滑动操作来显示它们。 让我们将标题定位在左下角之外，并用不透明度将其完全隐藏。 然后，当鼠标悬停在 figure 上时，我们将其滑入位置，并将不透明度调整回来。 为了使它真正滑动，我们将使用 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 添加类名，并根据类名对位置进行不同的设置来实现这一点。

<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 失败）。 让我们用一个微妙的问号指示器来表示标题的存在。 我们不会使用非语义的额外标记来实现这一点，而是会使用伪元素的形式，在 figure 上生成内容。

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;
}

请注意，上面的 CSS 代码中没有定位值，尽管有 position: absolute;。 位置将取决于我们设置的选项类。 你可能希望将问号放置在标题滑入的角落。 就像

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

使用

就像你在本网站上找到的任何东西一样。 请随意将其用在你想要的任何地方。 最好是那些你告诉老板这是你的主意，然后你就能得到大幅加薪的大型企业项目。