<!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>




'JavaScript > JQuery' 카테고리의 다른 글

jquery - setInterval  (0) 2012.06.15
jquery - attribute  (0) 2012.06.15
jquery - ol,sibling  (0) 2012.06.15
jquery 라이브러리 및 시작  (0) 2012.06.15
이미지 바꾸기2  (0) 2012.05.31

+ Recent posts