css- 마우스 hover 이미지 확대 (구글-scale)

많이 많이 유명해 지세요 ^^

html - table안에 이미지 넣기

<table align="center">
	<tr>
		<td>
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/이무진.JPG">
   				</div>
			</div>
		</td>
		<td>		
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/요아리.JPG">
   				</div>
			</div>
		</td>
		<td>	
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/이소정.JPG">
   				</div>
			</div>
		</td>
	</tr>	
	<tr>	
		<td>
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/이승윤.JPG">
   				</div>
			</div>
		</td>	
		<td>
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/이정권.JPG">
   				</div>
			</div>
		</td>
		<td>	
			<div class="img">
   				<div class="scale">
   					<img src="resources/img/singagin/정홍일.JPG">
   				</div>
			</div>
		</td>
	</tr>	
</table>

css - 마우스 hover 기능

/*  마우스 확대 css start */
 
.scale {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.3s ease-in-out;   /* 부드러운 모션을 위해 추가*/
}
	
 .scale:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
	}

 .img { width:200px; height:220px; overflow:hidden;  }   
 /* 부모를 벗어나지 않고 내부 이미지만 확대 :넘치는 부분은 잘려서 보여지지 않는다.*/
 
/*  마우스 확대 css end */