แสดง <div> หรือ <span> ทับรูปภาพเมื่อ hover ใน HTML

เพื่อให้ div หรือ span element แสดงทับรูปภาพเมื่อ hover เมาส์เหนือรูปภาพ สามารถทำได้ด้วย .image:hover overlay

เพื่อจัดตำแหน่ง .overlay อย่างสัมพัทธ์กับ parent element เรากำหนด height และ width 100% สำหรับขนาดรูปภาพทุกขนาด ทำให้ parent element เป็น inline-block

HTML

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

CSS

.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;
  }
}