묻고답하기
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 를 사용하지는 안했지만 해결하였습니다. 도움이 될 수 있도록 답변 주셔서 감사합니다.
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
로얄1004 | 게시판에 파일 첨부가 안됨니다 [2] | 2010.12.14 by 로얄1004 |
thisgun | 글 보기 본문 하단에 리스트 나오는 것을 삭제 하고 싶어요. [2] | 2010.12.13 by thisgun |
Mann | 사이트 접속이 안됩니다.. | |
마리모 | 기본 로그인 스킨은 어디에? [2] | 2010.12.13 by ForHanbi |
오스카 | [언어선택]별로 배너도 바뀌게 할 수 있나요? [1] | 2010.12.13 by ForHanbi |
안수완 | 이미지에 동영상처럼 보이게 CSS 기법 문의 [1] | 2010.12.13 by ForHanbi |
노길문 | 공식레이아웃 설치방법 도움말을 찾습니다. | |
마리모 | xe_member_message 테이블 컬럼에 대해 질문.. [1] | 2010.12.13 by SMaker |
antioxygen | 첨부파일 다운로드시 다운로드창이 뜨질 않습니다. | |
마리모 | xe 모듈을 개발하고 싶은데요. [1] | 2010.12.13 by ForHanbi |
미친박군 | 회원관리 에러 이미지 첨부합니다.ㅠㅠ | |
루피리 | 플래쉬에서 팝업 링크를 걸때 권한이 없습니다라고 뜹니다. | |
안수완 | Content 이미지 슬라이더 사용시 문제점 발견 [1] | 2010.12.13 by 배워서남준다 |
keyman | 회원가입 기본,추가 정보 페이지에 "글을 삽입하는 방법을 알고 싶습니다." [1] | 2010.12.13 by SeklutZ |
햐이 | 오류메세지가 뜹니다.. | |
레이머스 | 외부페이지에서 로그인 정보 받기 [1] | 2010.12.13 by Gekkou |
SABB | 집에서 돌리는 웹서버의 사양은 어느선이면 가능할까요? [1] | 2010.12.13 by Gekkou |
keyman | 회원가입의 기본정보 추가정보 페이지 디자인 수정하는 곳은? [1] | 2010.12.13 by Arp |
Boske | 컨텐츠 위젯 오류 | |
이동일636 | xe db 이전후 로그인이 안됩니다~ 도와주세요~ [2] | 2010.12.12 by Arp |
http://api.jquery.com/hover/ 가셔서 hover 사용법 익히신 다음에
위의 이미지를 div안에 넣고 (div의 배경처리를 하시든 아니면 이미지를 넣으시든 하신 다음에) div에 hover가 될때 버튼의 이미지가 나오게 만들고 버튼에 hover될때 이미지가 다시 바뀌게 하시면 됩니다.
공부하신다 생각하시고 해보세요.
사용법에 따라 많이 공부가 될 예제 같네요.