Foundation 6 缩略图悬停标题

【问题标题】：Foundation 6 thumbnail hover captionFoundation 6 缩略图悬停标题
【发布时间】：2016-05-10 14:26:12
【问题描述】：

制作缩略图悬停标题的最佳方法是什么，例如this example？

【问题讨论】：

【解决方案1】：

您可以将图像和标题放在容器中，并将标题的不透明度设置为 0，然后使用绝对位置将其放在图像顶部。在容器悬停时将不透明度设置为 1。

.thumb-wrapper{
 width:300px;
 height:200px;
 position:relative;
}

.thumb-wrapper .caption{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  opacity:0;
  background:rgba(0,0,0,0.25);
  padding:20px 0;
  text-align:center;
  transition:all linear 0.3s;
}
.thumb-wrapper:hover .caption{
  opacity:1;
}

这里是codepen示例，根据需要修改。

http://codepen.io/shoaibik/pen/pyYjpa

【讨论】：