HTML + CSS - 호버상에서 이미지 확대

Question

호버상에서 하나의 이미지를 확대하려고하는데 한 줄에 20 개의 이미지, 두 개의 선, 10이 있습니다. 현재 코드가 전체 라인을 확대합니다.이 문제를 해결할 수 있습니까?

html 파일

<p class="image"> 
<img src="images/100.jpg" alt="100!" width="90" height="125" border="0"> 
<img src="images/99.jpg" alt="99!" width="90" height="125" border="0"> 
<img src="images/98.JPG" alt="98!" width="90" height="125" border="0"> 
<img src="images/97.jpg" alt="97!" width="90" height="125" border="0"> 
<img src="images/96.jpg" alt="96!" width="90" height="125" border="0"> 
<img src="images/95.jpg" alt="95!" width="90" height="125" border="0"> 
<img src="images/94.jpg" alt="94!" width="90" height="125" border="0"> 
<img src="images/93.jpg" alt="93!" width="90" height="125" border="0"> 
<img src="images/92.jpg" alt="92!" width="90" height="125" border="0"> 
<img src="images/91.jpg" alt="91!" width="90" height="125" border="0"> 
</p> 

CSS 파일

.image { 
    width: 100%; 
    height: 100%;  
} 

.image img { 
    -webkit-transition: all 1s ease; /* Safari and Chrome */ 
    -moz-transition: all 1s ease; /* Firefox */ 
    -ms-transition: all 1s ease; /* IE 9 */ 
    -o-transition: all 1s ease; /* Opera */ 
    transition: all 1s ease; 
} 

.image:hover img { 
    -webkit-transform:scale(2); /* Safari and Chrome */ 
    -moz-transform:scale(2); /* Firefox */ 
    -ms-transform:scale(2); /* IE 9 */ 
    -o-transform:scale(2); /* Opera */ 
    transform:scale(2); 
} 

나는 각 이미지 이전 <p class...>를 사용하지만이 방법으로 나는 한 줄의 각 이미지가있을 때 그것은 올바른 작동합니다.

Answer 1

변경의 선택 :

.image:hover img 

.image img:hover 

jsFiddle example-