Foundation 6 thumbnail hover caption

Question

What is the best way to make a thumbnail hover caption, like this example?

Answer 1

You can put the image and caption inside a container and set the opacity for caption to 0 and put it on top of the image using absolute position. On container hover set the opacity to 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;
}

Here is codepen example, modify it to you needs.

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