當鼠標懸停在css3上時，如何讓圖像顯示在另一張圖像上？

嘿，我想要一個放大鏡或一些圖像，當鼠標懸停像這個網站時彈出另一個圖像 - http://www.elegantthemes.com/gallery/當你將鼠標懸停在圖像上時，圖像上方會出現一個圖像。有誰知道如何做到這一點？當鼠標懸停在css3上時，如何讓圖像顯示在另一張圖像上？

不知道，如果你需要的任何代碼，但這裏是我的img標籤的CSS：

img { 
width: 600px; 
height: 342px; 
border-radius: 1px; 
}

來源

2012-07-08 user1506962

它們將一個元素直接放在它上面，然後使用jQuery淡入鼠標懸停的不透明度。 – Ohgodwhy 2012-07-08 15:58:31

Ahh okay cheers :) – user1506962 2012-07-08 16:00:41

[在這裏，他們使用的是相同的代碼，我只是使用純CSS而沒有jQuery來實現它，但是你會發現沒有'fadeIn動畫'，只是瞬間顯示。]（http： //jsfiddle.net/5snqw/） – Ohgodwhy 2012-07-08 16:02:13

您可以

HTML

<div id="yourImage" ></div>

CSS

#yourImage { 
background-image: url('image1.jpg'); 
} 


#yourImage:hover { 
background-image: url('overimage.jpg'), url('image1.jpg'); 
}

來源

2012-07-08 16:00:51

不會有傳遞效果乾杯的人:)！ – user1506962 2012-07-08 16:02:24

如何將懸停圖像置於實際圖像上？ – user1506962 2012-07-09 13:26:20

每個由昏迷分隔的背景都可以像普通背景一樣設計，因此您只需使用「... url（'overimage.jpg'）中心，url ...' – 2012-07-09 13:36:08

沒有爲這個jquery plugin。

第一個效果是你要找的。

來源

2012-07-08 15:59:08 menislici

aww好吧謝謝，是否有可能只用css3做到這一點？ – user1506962 2012-07-08 16:00:26

嗯，是的，你可以，但它不會跨瀏覽器兼容，如你所知。我的猜測是在內容div後面使用圖像，並在容器的不透明屬性上使用[css3 transitions]（http://www.w3schools.com/css3/css3_transitions.asp）來淡化它。 – menislici 2012-07-08 16:04:10

好吧，歡呼聲 – user1506962 2012-07-08 16:11:35

您需要檢查CSS position屬性，以便您可以將這兩個元素放在同一個位置。然後只是改變懸停圖像的opacity。

來源

2012-07-08 16:00:44

好吧真棒歡呼的人:)！ – user1506962 2012-07-08 16:01:58

@AndréCatita雖然 – menislici 2012-07-08 16:06:26

你可以嘗試this做到這一點。我認爲它只使用CSS。

來源

2012-07-08 16:01:40 Sidd

乾杯人:)！ – user1506962 2012-07-08 16:03:34

@Mateusz有最好的答案，但我會通過增加沿着該線的CSS過渡東西提高在這：

-webkit-transition: opacity 1s ease-in; 
-moz-transition: opacity 1s ease-in; 
-o-transition: opacity 1s ease-in; 
transition: opacity 1s ease-in;

來源

2012-07-08 18:51:31 imakeitpretty

乾杯的人:)你知道如何將懸停圖像居中的實際圖像？目前它在左上角 – user1506962 2012-07-09 13:26:56

可能保證金：0 auto？ – imakeitpretty 2012-07-09 14:09:05

歡呼聲：D！ – user1506962 2012-07-09 15:24:11

試試這個：

HTML：

<div class="your-img"> 
    <div class="your-hover"></div> 
</div>

CSS：

.your-img { 
    width: 300px; /* your image width and height here */ 
    height: 225px; 
    background-image: url('../img/image_01.png'); 
} 
.your-hover { 
    width: 300px; 
    height: 225px; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
    background-image: url('../img/image-hover_01.png'); 
} 
.your-hover:hover { 
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
}

filter: alpha是爲IE，我希望它可以幫助。

來源

2012-07-08 20:12:52

當鼠標懸停在css3上時，如何讓圖像顯示在另一張圖像上？

回答

相關問題