แสดง

หรือ เหนือรูปภาพเมื่อ :hover ใน HTML

เพื่อให้องค์ประกอบ 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;
   }
}