在懸停時顯示圖片標題

Question

我試圖在有人懸停在圖片上時顯示標題。但我找不到一個辦法來完成這件事。我使用Twitter Bootstrap。

這是我的一個圖像的HTML。我不知道如何將內容放入內容中，以便只有在用戶將鼠標放在該內容上時纔會顯示該內容。

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 thumb"> 
     <a class="thumbnail caption-style-1 model-thumbnail " href="#"> 
      <img class="img-responsive" src="http://placehold.it/245x347" alt> 
     </a> 
    </div> 

Bootply

Answer 1

div {width: 245px; height: 245px;} 
 
a {position: relative; display: inline-block;} 
 
a + span {display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5);} 
 
a:hover + span {display: block; pointer-events: none;}

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 thumb"> 
 
    <a class="thumbnail caption-style-1 model-thumbnail " href="#"> 
 
    <img class="img-responsive" src="http://placehold.it/245x347" alt> 
 
    </a> 
 
    <span>Text</span> 
 
</div>

Answer 2

這裏是啓發的this website陰涼例子。

ul.img-list { 
 
    text-align: center; 
 
} 
 

 
ul.img-list li { 
 
    display: inline-block; 
 
    height: 150px; 
 
    position: relative; 
 
    width: 150px; 
 
} 
 

 
span.text-content span { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
span.text-content { 
 
    background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    display: table; 
 
    height: 150px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 150px; 
 
    opacity: 0; 
 
} 
 

 
ul.img-list li:hover span.text-content { 
 
    opacity: 1; 
 
}

<ul class="img-list"> 
 
    <li> 
 
     <img src="http://placehold.it/150x150"/> 
 
     <span class="text-content"><span>1st image</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="http://placehold.it/150x150"/> 
 
     <span class="text-content"><span>2nd image</span></span> 
 
    </li> 
 
    <li> 
 
     <img src="http://placehold.it/150x150"/> 
 
     <span class="text-content"><span>3rd image</span></span> 
 
    </li> 
 
</ul>