묻고답하기
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 남기남 |
김동원229 | mysql 용량초과 질문입니다. [1] | 2010.12.14 by 백성찬 |
한창선 | mysql 4.0버젼에서 xe 설치 [1] | 2010.12.14 by 백성찬 |
마리모 | 기본 로그인 폼 파일은 어디에? [1] | 2010.12.14 by 백성찬 |
Mann | 소켓오류해결 | |
장뚱이 | 익스플로러 맨 하단에 뜨는 사이트 정보 어케 바꾸나요? [1] | 2010.12.14 by SeklutZ |
괴적인격 | 페이지에 애드센스를 넣고 싶은데요? | |
xpress | 이미지닉네임 말입니다.. [1] | 2010.12.14 by SeklutZ |
이국환562 | 업그레이드 후, 기존 것은 삭제해도 되는지요? [1] | 2010.12.14 by SeklutZ |
쮸야282 | 제로보드4 -> xe로 이전했는데 포인터는 0으로 나오네요. [1] | 2010.12.14 by SeklutZ |
불패의초인 | 게시판 상위에 목록 쓰기 수정 삭제 버튼을 만들었는데요.. | |
hong`s | quickMenu 설정하는 소스 어떻게 해야 하나요. | |
hrum | 웹진형 게시판에에서 썸네일이 안나오네요. [2] | 2010.12.14 by hrum |
장익수 | 글수정 후 list.html template file is not exists 에러 메시지가나옵니다. [1] | 2010.12.14 by 바람의매 |
쿤데스리가 | 신디케이션 ping 오류 | |
로얄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 |
http://api.jquery.com/hover/ 가셔서 hover 사용법 익히신 다음에
위의 이미지를 div안에 넣고 (div의 배경처리를 하시든 아니면 이미지를 넣으시든 하신 다음에) div에 hover가 될때 버튼의 이미지가 나오게 만들고 버튼에 hover될때 이미지가 다시 바뀌게 하시면 됩니다.
공부하신다 생각하시고 해보세요.
사용법에 따라 많이 공부가 될 예제 같네요.