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/（已添加供应商前缀）

[编辑]：关于模糊图像的问题，如果您使用的分辨率高于图像要扩展到的分辨率，则无需担心分辨率降低。< / p>

Answer 2

您可以适当减少保证金：

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

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

需要img：悬停到不影响布局

2 个答案: