[CSS] 이미지 hover시 자연스럽게 변하도록 하는 기능

코드테스트

 

(만약 그림파일이 바뀌는걸 원할시 위 예제에서 img와 img-hover CSS의 background를 background-img:url("이미지주소") 로 바꾸어 쓰시면 됩니다)

작동 원리는
image-block으로 그림 크기를 잡아주고
그 안에 있는 img, img-hover를 position:absolute로 설정하여 겹쳐서 놓는다
(이 때 img-hover는 투명도(opacity)가 0이므로 안보임).

그 뒤에 hover시에 img-hover의 opacity를 1로 설정하면 끝.

예를 들어 빨간색 이미지(img) 위에 마우스를 댈 시 파란색 이미지(img-hover)가 뜨길 원할 경우

아래 그림처럼 동작한다.

 

 

[ 마우스 갖다대기 전 ]

 

 

 

 

[ 마우스 갖다댄 후 ]