基础6缩略图悬停标题

Question

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

Answer 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