호버효과CSS1 CSS 이미지 오버레이 (구현 방식, 접근성) JavaScript 없이도 이미지 위에 설명을 띄울 수 있다는 말, 처음엔 반신반의했습니다. 포트폴리오 페이지를 만들면서 mouseenter 이벤트 리스너를 카드마다 붙이던 저도 결국 CSS :hover 한 줄로 갈아탔고, 코드가 절반 이하로 줄었습니다. 구현 방법은 세 가지로 나뉘는데, 어떤 방식이 "더 낫다"고 단정 짓기 전에 상황에 따라 달리 봐야 할 지점이 있습니다.구현 방식: opacity, translateY, clip-path 비교가장 흔히 쓰이는 방법은 position:absolute와 opacity를 조합하는 방식입니다. 컨테이너 요소에 position:relative를 주고, 오버레이를 absolute로 얹은 뒤 :hover 시 opacity 값을 0에서 1로 바꾸는 구조입니다. 여기서.. 2026. 4. 21. 이전 1 다음
