24'C 구름 많음
서울 강남구
마우스 오버시 이미지 반투명해 지는 효과와 택스트 효과
<style>
.container {
position: relative;
width: 50%;
cursor:pointer;
}
.flower {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
}
.textBox {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(211,112,168,0.7);
color: white;
font-size: 1.5rem;
padding: 70px 120px;
}
.container:hover .flower {
opacity: 0.5;
}
.container:hover .textBox {
opacity: 1;
}
</style>
<div class="container">
<img src="img/1.jpg" alt="Avatar" class="flower">
<div class="textBox">벚꽃</div>
</div>