transition1 [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)가 뜨길 원할 경우 아래 그림처럼 동작한다. [ 마우스 갖다대기 전 ] [ 마우스 갖다댄 후 ] 2019. 10. 3. 이전 1 다음