html - 在鼠标悬停时缩放选取框标记中的图像

Question

我使用选取框标签创建了一个简单的图片库，您可以在以下位置看到它:
http://jsfiddle.net/gunturumanohar/62ZHC/

<marquee id="gallery" behavior="alternative" style="width:700px;padding:6px;" onmouseover="this.stop();" onmouseout="this.start();">
    <img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
    <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</marquee>

CSS 是:

#gallery img:hover {
    -webkit-transform: scale(1.5); /*Webkit: increase size to 1.5x*/
    opacity: 1; /*default opacity*/
    z-index: 10; /*place hover image in front the non-hover images*/
}

我使用 css scale 在悬停时缩放图像，但这里的问题是当缩放(缩放)图像时，图像顶部和底部不显示。

我认为问题出在图像的父标记 marquee 上。
我该如何克服这个问题？

Answer 1

作为实验的概念很酷，但我建议不要将此方法用于实际网站。虽然选取框得到很好的支持，但不推荐使用(参见 - marquee tag still works, is it okay to use it?)。此外，还有更好的方法可以使动画更流畅。话虽这么说，我已经为您解决了这个问题(采纳或保留建议)。

#gallery {
    text-align: center;
    width: 610px;
    margin: -140px auto;
    padding-top: 260px;
    height: auto;
    width:700px;
}
#gallery:hover { height: 270px; }

有点 hack-ish，但你正在做的事情也是如此，所以我认为这可能没问题。

DEMO