Question

我发布了我一直尝试用来执行此操作的代码，但它没用。我有一个图像在悬停时调整一点，但我想要一个带有文本divs＆amp;的图像。其他img divs在它上面调整大小调整悬停＆amp;让所有其他div调整大小。我只是谷歌我的答案，但我甚至不确定搜索的正确条款是什么。这是Twitpic的一个简单示例，因为我需要更多的声誉来发布图像。它是一个GIF动画，我们称之为文本＆＃34;文本＆＃34;，迷彩背景＆＃34; camobg＆＃34; ＆安培;月亮登陆pic＆＃34; moon＆＃34;。 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/

小提琴 - 更新了文字颜色，因此更容易看到

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);
}

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

1 个答案: