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