調整懸停在圖像上的所有東西？

我會發布我的代碼我一直試圖用來做到這一點，但它沒用。我有一個圖像在懸停時調整大小，但我想要一個帶有文本div的圖像&其他img divs在它上面調整一些懸停&使所有其他divs調整大小。我只是谷歌我的答案，但我甚至不知道什麼是適當的搜索條件。這裏有一個關於Twitpic的簡單例子，因爲我需要更多的聲望來發布圖片。這是一個動畫GIF，我們將文本稱爲「文本」，迷彩背景「camobg」月球登陸圖片「月亮」&。 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/

小提琴 - 更新文本顏色，以便更容易看到

來源

2014-06-12 user3082724

我相信這兩個圖像都可以用css實現，基本上是懸停，改變容器的大小 – Huangism

只需在'：hover'上改變圖像的大小，並保持寬高比，改爲'width：100px' while while '高度：汽車' – TheBokiya

@黃色，你能給我一些示例代碼嗎？我想確保當我使用：懸停 – user3082724

如果您有包含要調整的一切元素，使用含有元素的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); 
}

來源

2014-06-12 18:57:15 Joe

你的小提琴的工作，但我有這個奇怪的使用CSS3的猶豫。我自己有一個div來調整沒有CSS3的懸停，我可以用普通的CSS來做這個嗎？ – user3082724

你可以使用jquery動畫並指定你想改變的屬性。請注意，文本更改大小僅適用於繼承字體大小。 [小提琴]（http://jsfiddle.net/ccQ9Z/3/） – Joe

你也可以使用jqeuryui擴展，允許動畫類更改[小提琴]（http://jsfiddle.net/ccQ9Z/4/） – Joe

調整懸停在圖像上的所有東西？

回答

相關問題