圖像懸停反向使用CSS

我有一個css圖像懸停效果，其中div中的圖像變爲0不透明度，然後顯示背景圖像。這意味着當你懸停時，一個圖像淡出，另一個出現。圖像懸停反向使用CSS

此效果使用CSS和webkit。

但問題是，當您將鼠標懸停在圖像上時，效果會發生，但不會反轉，這意味着當您離開圖像時它不會淡入。但那是我想要的效果。

這是HTML標記...

<div id="info"><img src="infow1.png" width="800" height="800" /></div>

這是CSS標記...

#info { 
background: url(infow2.png) 0 0 no-repeat; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -400px; 
margin-left: -400px; 
width: 800px; 
height: 800px; 
z-index:100; 
opacity: 1; 
-webkit-transition: opacity; 
-webkit-transition-timing-function: ease-out; 
-webkit-transition-duration: 500ms; 
} 
#info img:hover{ 
opacity:0; 
-webkit-transition: opacity; 
-webkit-transition-timing-function: ease-out; 
-webkit-transition-duration: 500ms; 
}

所以總體來說，我希望infow.png淡出，當鼠標懸停在當你離開時圖像會淡入。

來源

2012-07-10 williamchanter

您希望圖像初始可見，然後在懸停淡出後？ – kamalo 2012-07-10 18:47:53

這是你在找什麼？

HTML：

<img src="infow1.png" class="fadeOut">

CSS3：

.fadeOut { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.fadeOut:hover { 
    opacity: 0; 
}

JS小提琴：http://jsfiddle.net/AXQW4/1/

編輯：如果你想顯示徘徊時，不同的圖像，你可以將其添加爲background-image原件後面：http://jsfiddle.net/8qzcY/

來源

2012-07-10 18:51:02 JSW189

謝謝，完美！ – williamchanter 2012-07-10 19:34:12

您已經創建了適用於unhovered圖像，所以如果你創建了一些規則，因爲這樣沒有規則：

#info img { 
    opacity: 1; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
}

JS Fiddle demo。

它應該如你所願地工作。

相比之下，相同的演示沒有隱藏的#info img規則：JS Fiddle demo，它似乎與您的描述相符。

來源

2012-07-10 18:51:55

圖像懸停反向使用CSS

回答

相關問題