이미지롤
-
이미지 롤링 [transition] :: 마이구미HTML, CSS 2016. 8. 1. 16:05
이번 글은 css를 통해 이미지 롤링을 만들어 볼 것이다. 이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다. 예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다. 샘플 페이지 페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다. 페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다. css의 transition를 이용하면 해결된다. 일단 html 소스를 보자. span 태그안에 img 태그가 있다. 여기서 기억할 것은, 처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다. 자 기억했다면, css 소스를 보자. /*처음 로딩시*/ .dissolve {..