调整悬停时图像上的所有内容？

Question

我会发布我一直试图用来执行此操作的代码，但它没有用。我有一个图像可以在悬停时稍微调整大小，但我想要一个带有文本 div 和其他 img div 的图像在悬停时稍微调整大小并让所有其他 div 随之调整大小。我只是用谷歌搜索我的答案，但我什至不确定搜索的正确术语是什么。这是 Twitpic 上的一个简单示例，因为我需要更多的声誉来发布图片。这是一个动画 gif，我们将文本称为“text”，迷彩背景称为“camobg”，月球着陆图片称为“moon”。 simple html/css hover example

如果你想要一些额外的功劳，你可以告诉我你的想法如何做这个更流畅的 javascript 版本。这是 Twitpic 上的另一个 gif，大致显示了我的意思。 simple javascript hover example

提前致谢！！！ :)

<div id="Image1" style="position:absolute;left:72px;top:176px;width:515px;height:250px;z-index:0;‌​"> 
    <img src="images/camobg.jpg" id="Image1" alt="" style="width:515px;height:250px;">
</div>
<div id="Image2" style="position:absolute;left:372px;top:205px;width:204px;height:200px;z-index:1‌​;"> 
    <img src="images/moon.jpg" id="Image2" alt="" style="width:204px;height:200px;">
</div>
<div id="Text1" style="position:absolute;left:109px;top:236px;width:232px;height:76px;z-index:3;‌​text-align:left;">
    <span style="color:#FFFFFF;font-family:'Arial Black';font-size:27px;">We went to the moon!</span>
</div>

CSS

#Image1 { border: 0px #000000 solid; } 
#Image2 { border: 0px #000000 solid; } 
#Text1 { 
    background-color: transparent; 
    border: 0px #000000 solid; 
    padding: 0; 
    text-align: left; 
} 
#Text1 div { text-align: left; } 

http://jsfiddle.net/L5t3L/

Fiddle - 更新了文本颜色，以便于查看

Answer 1

如果您的元素包含要调整大小的所有内容，请对包含的元素使用 scale 转换，如下所示：jsfiddle

#container {
    transition: all 1s ease-in-out 0s;
}
#container:hover {
   -ms-transform: scale(2,2); /* IE 9 */
    -webkit-transform: scale(2,2); /* Chrome, Safari, Opera */
    transform: scale(2,2);
}