w3.css 이미지 오버레이 슬라이드 마우스를 올리면 이미지에 슬라이딩 오버레이 효과를 만드는 방법을 알아보자. 슬라이드 인(상단) 만들기 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div> 2단계) CSS 추가 .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height:0; transition: .5s ease; } .container:hover .overlay { bottom: 0; height: 100%; }…