ホバー時に画像に字幕を表示

Question

画像の上に人が写っているときに字幕を表示しようとしています。しかし、私はこれを行う方法を見つけることができませんでした。

私はTwitter Bootstrapを使用しています。

ここに、画像の1つの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>