CSS_Experience 교환을 사용하여 이미지를 확대하고 표시하는 아이디어

/* common 스타일링 */
a {color:#000;}
a:hover {text-꾸밈:none;}
a:visited {color:#000;}
/* 슬라이드 스타일링 */
.photo { padding:20px; width:600px; text-align:left;}
.photo h1 {글꼴 크기:14px; :#fc0; 여백: 0 0 5px;
.photo ul {list-style:none; 여백:0; 테두리:1px #666; 위치:상대적; 높이:144px;}
.photo ul li {display:inline; 너비:24px; 높이:24px;}
.photo ul li a 디스플레이:블록; 너비: 24px; 높이:24px; 커서:기본값:url(pics/arrow.gif) no-repeat;}
.photo ul li a b {display:none;}
ul li a img { 디스플레이:블록; 너비:22px; 높이:22px; 테두리:1px solid #666; border-top-color:#ccc;}

.photo ul li a:hover space:normal;position :relative;}

.photo ul li a.vert:hover img {위치:절대:-12px; 너비:48px; 색상:#fc0; }
.photo ul li a.hor:hover img {위치:절대:-20px; 너비:64px; 테두리-색상:#fc0;}

.photo ul li a:active, .photo ul li a:focus {위치:static; 개요:0;}

.photo ul li a:focus.vert img, .photo ul li a:active .vert img {배경 색상:#000; 왼쪽:260px; 너비:240px; 테두리:1px 솔리드 #fc0; 🎜>.photo ul li a:focus.hor img, .photo ul li a:active.hor img {배경색:#000; 왼쪽:260px; 높이:240px ; 테두리:1px 솔리드 #fc0; 패딩:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; ; 테두리:1px 솔리드 #666; 왼쪽:0; 글꼴-가중치:일반;}


러닝 효과 보기: