html - 需要 img:hover 不影响布局

Question

我有一个画廊，当悬停时它会炸毁图像。它目前放大了图像，但与页面其余部分的布局相混淆。有没有办法让图像放大而不弄乱剩余的图像？

这是CSS

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

Answer 1

请改用 CSS3 属性transform: scale(n)：

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

注意：如果您不希望图像集中展开（在 smack 中间变换原点），您可能需要指定变换原点：

transform-origin: posx posy;

在这种情况下，我建议使用transform-origin: 0 0;，因为您将图像浮动到左侧。

http://jsfiddle.net/teddyrised/t3rUb/（已添加供应商前缀）

[编辑]：关于模糊图像的问题，如果您使用的分辨率高于图像将要扩展到的分辨率，则不必担心分辨率降低。

Answer 2

您可以适当减少margin：

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

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