放大懸停圖片並保持相同的大小

Question

我想爲我的網站有懸停縮放功能，但是，我看過其他示例和我的代碼似乎是相同的，但圖像的尺寸不保持原樣。任何想法可能是什麼問題？

.imgBox { 
    display: inline-block; 
    overflow: hidden !important; 
    transition: .3s ease-in-out 
} 

.imgBox { 
 
    display: inline-block; 
 
    overflow: hidden !important; 
 
    transition: .3s ease-in-out 
 
    } 
 
    .imgBox:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=30); 
 
    transform: scale(1.3); 
 
    }

<div class="large-3 medium-6 small-12 columns"> 
 
    <h2>Heading 1</h2> 
 
    <img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" /> 
 
    <p>Paragraph here</p> 
 
</div>

JSFiddle

Answer 1

看來，你正試圖擴展這是很好的形象，但限制什麼是真正看到需要的圖像被內的縮放貨櫃。

然後當圖像縮放後，容器會隱藏任何通常會「溢出」的東西，如果你沒有隱藏溢出的話。

所以，像這樣：

.imgBox { /* now a container for the image */ 
 
    display: inline-block; /* shrink wrap to image */ 
 
    overflow: hidden; /* hide the excess */ 
 
    } 
 
    .imgBox img { 
 
    display: block; /* no whitespace */ 
 
    transition: .3s ease-in-out; 
 
    } 
 
    .imgBox:hover img { 
 
    transform: scale(1.3); 
 
    }

<div class="large-3 medium-6 small-12 columns"> 
 
    <h2>Heading 1</h2> 
 
    <div class="imgBox"> 
 
    <img src="http://lorempixel.com/image_output/food-q-c-300-200-9.jpg" /> 
 
    </div> 
 
    <p>Paragraph here</p> 
 
</div>

Answer 2

保利是正確的肯定，但還有另一種方式，你可以使用background-image代替img標籤

.imageWrapper{ 
 
    background-image:url("http://techmadeplain.com/img/2014/300x200.png"); 
 
    width:300px; 
 
    height:200px; 
 
    background-size:100%; 
 
    background-position: center center; 
 
    transition: .3s ease-in-out; 
 
    } 
 

 
    .imageWrapper:hover{ 
 
    background-size:130%; 
 
    }

<div class="large-3 medium-6 small-12 columns"> 
 
    <h2>Heading 1</h2> 
 
    <div class='imageWrapper'> 
 
    </div> 
 
    <p>Paragraph here</p> 
 
</div>