|
답변 2개
채택된 답변
+20 포인트
2019-02-19 (화) 17:11:16
구글에서
css opacity transition
라고 검색해보시기 바랍니다.
관련 자료 많이 나옵니다.
2019-02-19 (화) 18:08:59
윗분 말씀하신 내용을 간단하게 작성하면 아래와 같습니다.
div안에 image 가 들어있다고 가정하면,
div의 배경을 흰색으로 지정하고 마우스 오버시 이미지를 반투명하게 만들어주면
이미지가 밝게 보이는 원리입니다.
css 의 hover나 Active 클래스를 자바스크립트로 제어하거나 할때 동일하게
기본 스타일 (마우스 오버나 새로운 클래스가 add 되기전의)에 transition 값을 넣어줍니다.
div { background-color : #FFF; }
div img { opacity: 1; transition: 1s; }
div:hover img { opacity: .5; }
답변을 작성하려면 로그인이 필요합니다.