<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#pic1{width: 30%px; height: 30%px; /* 작게 */}
/* 썸네일 이미지를 올려놓을 갤러리 스타일 */
#gallery {
border: 10px solid #1D0C16; /* 굵은 테두리 */
height: 800px; /* 높이 */
width: 450px; /* 너비 */
margin-left: auto; /* 여백 자동 */
margin-right: auto;
overflow: visible; /* 오버플로일 경우 visible로 */
/* 내가 div를 300x300크기로 만들었는데
그 안에 이미지를 600x700짜리를 넣었다면 삐져나온 부분을 보이게 할것인가 */
background: #272229; /* 배경색 */
-webkit-box-shadow: #272229 10px 10px 20px; /* 박스 그림자 google chrom*/
-moz-box-shadow: #272229 10px 10px 20px;/* fire fox */
filter: progid:DXImageTransform.Microsoft.Shadow(
color='#272229', Direction=135, Strength=10);/* explorer */
box-shadow: #272229 10px 10px 20px;/* 일반적 */
}
/* 썸네일 목록 전체 스타일 */
#gallery ul{
margin-left:-30px; /* 갤러리 가운데에 콘텐츠가 올 수 있도록 */
}
/* 썸네일 각 항목에 대한 스타일 */
#gallery ul li {
list-style:none; /* '.'같은 불릿 없앰 */
display:inline-table; /* 테이블 스타일로 배치*/
padding:10px; /* 안여백은 각각 10px로 */
}
/* 평소 큰 이미지 .pic 에 대한 스타일 */
#gallery ul li #pic2{
-webkit-transition: all 0.6s ease-in-out; /* 웹킷 브라우저에서 트랜지션 효과가 나타나도록 */
opacity:0; /* 페이드아웃 효과 */
visibility:hidden; /* 처음에는 보이지 않게 */
position:absolute; /* 고정 위치 */
margin-top:10px; /* 상단 여백 */
margin-left:-20px; /* 왼쪽으로 20픽셀 이동해서 */
border:1px solid black; /* 검은색 테두리 그림 */
-webkit-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */
-moz-box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',
Direction=135, Strength=5); /* 박스 그림자 */
box-shadow:#272229 2px 2px 10px; /* 박스 그림자 */
}
#gallery ul li #pic1:hover{
cursor:pointer;
}
/* 썸네일 이미지 위로 마우스 오버했을 때 큰 이미지의 스타일 * */
#gallery ul li:hover #pic2{
width:320px; /* 너비 */
height:240px; /* 높이 */
opacity:1; /* 불투명하게 */
visibility:visible; /* 화면에 보임 */
float:right; /* 오른쪽으로 플로팅 */
}
</style>
</head>
<body>
<div id="gallery">
<ul>
<li>
<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_15.jpg">
<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_15.jpg">
</li>
<li>
<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_137.jpg">
<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_137.jpg">
</li>
<li>
<img id="pic1" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_106.jpg">
<img id="pic2" src="http://www.rovio.com/UserFiles/Image/RovioProducts//200x400_106.jpg">
</li>
</ul>
<!-- <div>
<img id="pic2">
</div> -->
</div>
</body>
</html>