HTMLの：hoverの画像の上に

またはを表示します

マウスを画像の上に置いたときにdivまたはspan要素を画像の上に表示できるようにするには、.image：hover overlay

.overlay要素を親要素に対して完全に相対的な位置に配置するには、すべての画像サイズで高さと幅を100％にして、親要素をインラインブロックにします

HTML

<div class="image">
   <img src="..." />
   <div class="overlay">Content to be displayed on hover</div>
</div>

CSS

By hiding the .overlay element by default, we use the selector .image:hover .overlay to change the styling on hover. Due to the HTML structure, this works well because .overlay is a descendant element.
.image {
   position:relative;
   display:inline-block;
}
.overlay {
   display:none;
}
.image:hover .overlay {
   width:100%;
   height:100%;
   background:rgba(0,0,0,.5);
   position:absolute;
   top:0;
   left:0;
   display:inline-block;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;

   /* All other styling - see example */
   img {
      vertical-align:top;
   }
}