放大悬停图片并保持相同的大小

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>