css 마우스오버 이미지 확대 질문입니다.
재바우
안녕하십니까, 이제는 css 질문입니다.
이것땜에 거의 12시간 헤매고 있습니다. 아.. 우울합니다.
css hover를 이용 위에있는 각 이미지에 마우스 오버하여 하면
다른 이미지가 (같은 이미지 원본도 됨) 밑에 있는 흰 공간(id=content)에 위치하여 오게 해야합니다.
어찌 해야할지 몰라 검색하고 해봐도 어떻게 display:none 하고 다시 보여줘야할 지 몰라
답답한 마음에 올리게 되었습니다.
소스는...아래 입니다.
고수님들의 가르침을 얻습니다.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title김태희/titlestyle type=text/css
body { margin: 0;/*웹브라우저들 마다 body 엘레멘트의 기본 마진 크기가 약간씩 차이 나기 때문에*/ padding: 0; /*만약 body에 마진을 줄 필요가 있다면 body 자체에 마진을 주기 보다*/ background: #FCF; /*그 하위 엘레멘트의 마진 크기를 조절하는 방법이 더 좋습니다.ex) wrap*/}#wrap { width: 900px; padding: 0; margin: 0 auto; margin-top: 0px;/*height:600px;*/
}#header h3 { margin: 0; padding: 10px; font-family: 굴림; font-size: 12px;}
#pics { display: block; background-color:#369; clear:both;}#pics ul { padding: 0; margin: 0; list-style: none;}#pics ul li { margin: 0; display: inline; float: left}.polaroid { top: 0px; width: 160px; padding: 10px 9px 20px 9px; background-color: #fff; -webkit-box-shadow: 5px 5px 10px #000; -moz-box-shadow: #272229 2px 2px 10px; box-shadow: #272229 2px 2px 10px;}
#content { /*border:2 solid #000*/ float:left; clear:both; margin: 0; padding: 0px; width: 900px; }#content h3 { margin: 0; padding: 10px; font-family: 굴림; font-size: 9px;}
#content.pp{ border-style: outset; border-color: #000; /*display:block;*/ width: 868px; height: 230px; padding: 10px; /*border: 1px solid #bfbfbf;*/ background-color: #fff; -webkit-box-shadow: 5px 5px 10px #000; /* 박스 그림자(가로,세로,번지기정도, 그림자색상) 크롬, 사파리*/ }
#footer { width: 900px; background: #3FF; float:left;}/*.polaroid { top:0px; width:150px; padding:10px 10px 20px 10px; border: 1px solid #bfbfbf; background-color:#fff; -webkit-box-shadow: #272229 2px 2px 10px;;;; -moz-box-shadow: #272229 2px 2px 10px; ; box-shadow: #272229 2px 2px 10px;;}*/
.caption { /* 이미지 캡션 지정 */ text-align: center; font-family: 바탕; font-weight: 600; font-size: 15px; color: #060;}.hide { display: none !important;}/style/head
bodydiv id=wrap div id=header h3태희느님/h3 /div div id=pics ul li img src=./images/tt1.png class=polaroid/ p class=caption 김태희1 /p /li li img src=./images/tt2.pngclass=polaroid / p class=caption 김태희2 /p /li li img src=./images/tt3.png class=polaroid/ p class=caption 김태희3 /p /li li img src=./images/tt4.pngclass=polaroid / p class=caption 김태희4 /p /li li img src=./images/tt5.pngclass=polaroid / p class=caption 김태희5 /p /li li img src=./images/tt6.png class=polaroid / p class=caption 김태희6 /p /li li img src=./images/tt7.pngclass=polaroid / p class=caption 김태희7 /p /li li img src=./images/tt8.pngclass=polaroid / p class=caption 김태희8 /p /li li img src=./images/tt9.png class=polaroid / p class=caption 김태희9 /p /li li img src=./images/tt10.png class=polaroid / p class=caption 김태희10 /p /li /ul /div div id=content class=pp img class= src=/div div id=footer fddd /div/div/body/html
-
아인
음.. 그래야 되겠네요
-
스콜피온
스크립트나 제이쿼리를....쓰시길 바래옹~
-
벤자민
그런가요 ㄷㄷ;;
-
연분홍
css로 가능하나요?
스크립트 써야 할것 같은데