Hiển thị

hoặc trên hình ảnh trên:di chuột trong HTML

Để cho phép phần tử div hoặc span xuất hiện trên hình ảnh khi di chuột qua hình ảnh, điều này có thể được thực hiện với sự trợ giúp của .image:hover overlay,

Để định vị phần tử .overlay hoàn toàn so với phần tử mẹ, chúng tôi cung cấp chiều cao và chiều rộng là 100% cho tất cả các kích thước hình ảnh làm cho phần tử mẹ inline-block

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