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