懸停時的圖像縮放效果

Question

這個想法是在鼠標懸停上創建縮放效果。但由於高度爲'自動'，放大的圖像不包含在div中並且高度增加。爲了響應設計目的，我必須保持高度'自動'。一個出路，將不勝感激。以下是鏈接：http://jsfiddle.net/nitish_8/zaeZ4/

<div class="item"> 
<img src="images/2.jpg" /> 
</div> 
<div class="item"> 
<img src="images/2.jpg" /> 
</div> 
<div class="item"> 
<img src="images/2.jpg" /> 
</div> 
<div class="item"> 
<img src="images/2.jpg" /> 
</div> 

Answer 1

試試以下的項目DIV懸停代碼，希望這將幫助你

.item:hover img { 
    -webkit-transition: all 21s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: al 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    transform: scale(1.1) ; 
    -webkit-transform:scale(1.1) ; 
    -moz-transform: scale(1.1) ; 
    -o-transform: scale(1.1) ; 
    -ms-transform: scale(1.1) ; 
} 

Answer 2

我想你可以從item類中刪除ovewflow屬性，使div不以剪裁放大圖像

Answer 3

代碼從TalkersCode.com這裏是一個完整的教程http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

.item img 
{ 
max-width: 100%; 
-moz-transition: all 0.3s; 
-webkit-transition: all 0.3s; 
transition: all 0.3s; 
width:250px; 
height:220px; 
} 
.item:hover img 
{ 
-moz-transform: scale(1.3); 
-webkit-transform: scale(1.3); 
transform: scale(1.3); 
}