웹
이미지 hover 시 오버레이 보여주기
<div class="container">
<img class="image" src="https://picsum.photos/200" />
<div class="overlay">
Overlay content here
</div>
</div>
.container {
position: relative;
display: inline-block;
cursor: pointer;
}
.image {
display: block;
}
.overlay {
background-color: #000000ff;
color: white;
opacity: 0;
transition: opacity 120ms;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 텍스트 가운데 정렬 */
display: flex;
align-items: center;
justify-content: center;
}
.overlay:hover {
opacity: 0.7;
}
이미지에 커서를 hover 했을 때 overlay content가 보여진다.
이미지의 크기에 따라 container의 사이즈도 변경된다.
이미지와, 이를 감싸는 컨테이너를 먼저 배치하고,
overlay 엘리먼트를 컨테이너 전체 면적을 차지하도록 absolute로 설정한다.
hover 시 opacity를 조정해주면 hover시에만 해당 내용을 보여줄 수 있게 된다.
https://jsfiddle.net/rn3e4c5d/20/
02025. 01. 11.
