필요 img : hover에 영향을 미치지 않기 위해서

Question

나는 공중에 올려 놓을 때 이미지를 날려 버리는 갤러리를 가지고있다. 현재 이미지를 확대하고 있지만 나머지 페이지의 레이아웃은 엉망입니다. 이미지를 확대하고 나머지 이미지를 엉망으로 만드는 방법이 있습니까?

.gimg:hover{ 
    transform: scale(2);  // You might want to add vendor 
    transform-origin: 0 0; // prefixes to these properties 
} 

참고 : 중앙에서 확장 (헤로인 중간에 기원을 변환) 이미지를 원하지 않는 경우 여기

는 CSS를

.gimg{ 
    height:85px; 
    width:150px; 
    float:left; 
    margin: 10px 10px 10px 10px; 
} 
.gimg:hover{ 
    height:170px; 
    width:300px; 

Answer 1

CSS3의 property 대신 transform: scale(n)을 사용하는 것입니다

transform-origin: posx posy; 

이 경우에는 다음과 같이 다시 작성합니다. 이미지가 왼쪽에 떠 있기 때문에 transform-origin: 0 0;을 사용하여 추천합니다.

http://jsfiddle.net/teddyrised/t3rUb/ (공급 업체 접두사가 추가되었습니다)

[편집] :이 이미지로 확장하는 것보다 더 높은 해상도를 사용하는 경우 흐린 이미지 문제와 관련하여, 당신은하지 않습니다 감소 된 해상도에 대해 걱정해야합니다.

Answer 2

당신은 적절하게 마진을 줄일 수 있습니다 : 이미지가 축소되어

.gimg { 
    height: 85px; 
    width: 150px; 
    float: left; 
    margin: 10px 10px 10px 10px; 
} 

.gimg:hover { 
    height: 170px; 
    width: 300px; 
    margin: -32px -65px -32px -65px; 
}