Hiển thị <div> hoặc <span> đè lên ảnh khi :hover trong HTML

Để cho phép div hoặc span xuất hiện đè lên ảnh khi di chuột qua, dùng .image:hover .overlay.

Để định vị .overlay tuyệt đối tương đối với phần tử cha, set height và width 100% cho mọi kích thước ảnh, làm cho phần tử cha thành 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;
    }
}