HTML5 CSS 스케일링을위한 960 그리드 레이아웃의 이미지 전환

Question

이미지의 높이/너비가 올바르게 나타나도록 전환하는 데 문제가 있습니다. 기본적으로 나는 그것의 크기를 두 배로 더 잘 볼 수 있도록 확대하려면 이미지를 얻기 위해 노력하고

Image Transition Link

: 난 당신이 내 페이지를 보면 많은 설명이 필요한 것 같아요. 그러나, 나는 그것을 960 격자 레이아웃으로 가지고 있기 때문에 적절하게 나타나지 않습니다.

이것을 시도하십시오 : Chip Kidd 및 David Carson 이미지를 클릭하면 볼 수 있습니다.

칩 키드는 마우스로 가리킬 때 나쁘지는 않지만 확대 할 때 상단 대신에 데이비드 카슨 이미지 뒤에 나타납니다.

오른쪽에 이미지가 없기 때문에 David carson이 문제가없는 것 같습니다. 그러나, 왼쪽으로 자라는 대신 960 그리드의 오른쪽과 바깥쪽으로 자랍니다.

이미지의 확대를 예술적으로 즐겁게 보이게하기 위해 사용할 수있는 수정 사항은 무엇입니까 (즉, 다른 이미지 뒤에 숨어 버릴 염려가 없으며 아마도 12 마당 컨테이너의 크기 내에 머물러 있기보다는 David Carson 이미지는 무엇입니까?)

Answer 1

너비와 높이를 변경하는 대신 css transform (scale)을 사용해보세요.

수정 : 호버 규칙을 다음으로 변경하십시오 (브라우저 접두사를 추가해야 함).

.zinepages img:hover { 
    position: relative; 
    z-index: 100; 
    -webkit-transform: scale(2); 
    transition: all 2s; 
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
} 

상대 위치와 z- 색인을 추가하여 항상 다른 항목보다 위에 위치하도록했습니다. 나는 또한 당신이 그것을 지키고 싶으면 당신까지, 더 좋은 효과를위한 박스 - 섀도우를 추가했습니다.

편집 2 : 그리드가 오버 플로우되지 않도록주의했습니다. 변형 원점을 사용하여이를 수행 할 수 있습니다. 왼쪽 맞춤 및 오른쪽 맞춤 이미지에 클래스를 지정하고 각각 transform-origin: left top; 또는 transform-origin: right-top;을 설정해야합니다. 다시 말하지만, 여기서는 공급 업체 접두어를 생략했습니다.