묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
이미지에 동영상처럼 보이게 CSS 기법 문의
2010.12.13 13:37
음악사이트에 보면 아래의 기능을 많이 사용하고 있습니다.
아래의 벅스뮤직의 예 인데요.
(벅스 뮤직의 경우)
첫번째 이미지만 출력되고
두번째 마우스를 이미지 안에 넣으면 동영상이라고 인식할 수 있는 가운데 플레이버튼을 출력하고
세번째 마우스가 플레이버튼 안으로 들어가면 플레이버튼이 변경되는 형태입니다.
위에 3단계를 2단계로 바꾸어도 무리는 없겠죠.
위와 같이 동영상 게시판의 경우 갤러리 형태로 리스트를 출력하면 이미지 하나를 넣어 썸네일 형식으로 출력할 수 있잖아요.
그런데 동영상 게시판이기에 동영상 처럼 보이게 할려고.. 벅스뮤직과 같이 마우스가 이미지가 올라가면 플레이버튼이
나오게 할려면 어떻게 해야되나요?
CSS 에 사용하는 것 같은데.. 잘 모르겠어요.
위와 같은 예제 소스를 갖고 계시가나 구현할 수 있는 방법을 알려주셨으면 합니다.
댓글 1
-
ForHanbi
2010.12.13 19:53
-
안수완
2010.12.14 18:24
hover 를 사용하지는 안했지만 해결하였습니다. 도움이 될 수 있도록 답변 주셔서 감사합니다.
http://api.jquery.com/hover/ 가셔서 hover 사용법 익히신 다음에
위의 이미지를 div안에 넣고 (div의 배경처리를 하시든 아니면 이미지를 넣으시든 하신 다음에) div에 hover가 될때 버튼의 이미지가 나오게 만들고 버튼에 hover될때 이미지가 다시 바뀌게 하시면 됩니다.
공부하신다 생각하시고 해보세요.
사용법에 따라 많이 공부가 될 예제 같네요.