테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

그림오버효과질문입니다. 채택완료

찔찔이 6년 전 조회 2,326
답변 2
목록

http://www.wart.or.kr/?NaPm=ct%3Djsbh7zdu%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3D%7Chk%3Dc60bd63450e319019e855c452b9a4daf5fd34416">아래경로첨부파일 부분의 이미지처럼 그림에 마우스 오버시 흰색으로 서서히 바뀌는 효과를 주고 싶습니다.

http://www.wart.or.kr/?NaPm=ct%3Djsbh7zdu%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3D%7Chk%3Dc60bd63450e319019e855c452b9a4daf5fd34416">고수님들의 조원 부탁드립니다.

http://www.wart.or.kr/?NaPm=ct%3Djsbh7zdu%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3D%7Chk%3Dc60bd63450e319019e855c452b9a4daf5fd34416">http://www.wart.or.kr/?NaPm=ct%3Djsbh7zdu%7Cci%3Dcheckout%7Ctr%3Dds%7Ctrx%3D%7Chk%3Dc60bd63450e319019e855c452b9a4daf5fd34416

#그림오버효과
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
잉끼s
잉끼s
6년 전

구글에서 

css opacity transition

 

라고 검색해보시기 바랍니다.

관련 자료 많이 나옵니다.

 

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

D
DNKK
6년 전

윗분 말씀하신 내용을 간단하게 작성하면 아래와 같습니다.

div안에 image 가 들어있다고 가정하면,

div의 배경을 흰색으로 지정하고 마우스 오버시 이미지를 반투명하게 만들어주면

이미지가 밝게 보이는 원리입니다.

css 의 hover나 Active 클래스를 자바스크립트로 제어하거나 할때 동일하게

기본 스타일 (마우스 오버나 새로운 클래스가 add 되기전의)에 transition 값을 넣어줍니다.

 

div { background-color : #FFF; }

div img { opacity: 1; transition: 1s; }

div:hover img { opacity: .5;  }

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인