Div 在悬停时按比例移动

【问题标题】：Div moves on hover with scaleDiv 在悬停时按比例移动
【发布时间】：2011-09-15 19:41:57
【问题描述】：

看这里：

当您将鼠标悬停在缩略图上时，通过位置：绝对在缩略图上（位置：相对）定位的标题会移动。在 :hover 上定义的唯一内容是

transform:scale(1.2);

任何想法如何解决？

我需要两个单独的 div 作为标题，1 个用于背景，1 个用于文本（不能使用 RGBA）。

请注意，图像周围的边距需要保留。在本例中，为 5px，但也可以为 20px 或更多。

谢谢，卫斯理

【问题讨论】：

标签： css html positioning transform scale

【解决方案1】：

这是工作的html +css

<a href="https://picasaweb.google.com/Darryl.Wilson1/MyPictures02#5157833312913845474"       style="padding:0px;margin:0px" class="thumbnail zoom">

<div class="container" style="padding:0px;margin:0px">
     <img src="http://lh6.ggpht.com/-iMWjZc44UuA/R5ROEhrn7OI/AAAAAAAAAV4/3l2mDuaeQ4Q/s160-c/Acura%252520Advanced%252520Sports%252520Car%252520Concept%25252002.jpg" style="width: 160px;">

    <div class="title_grid inside" style="width: 160px;margin:0px;position:absolute;left:0px ">
    </div>
    <div class="title_grid inside_text" style="width: 160px;">
     <span>&nbsp;Acura Advanced</span>
    </div>
</div>
</a>

【讨论】：

谢谢，但我希望每张图片有 5px 的边距，你可以去掉所有边距。它应该与 5px、20px 的边距一起工作，这都是我投入的值。
为什么不将上面发布的代码包装在 div 标签中并在它们上面加上边距？
如果没有更简单的解决方案，我想必须这样做！
哦，是的，你需要设置 display:inline-block 为包装 div 使其在缩放期间尽可能小