HTML의 :hover에서 이미지 위에

또는 표시

이미지 위로 마우스를 가져갈 때 div 또는 span 요소가 이미지 위에 표시되도록 하려면 .image:hover 오버레이를 사용하여 수행할 수 있습니다.

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