基礎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