使用CSS将图像悬停在Reverse中

Question

我有一个css图像悬停效果,其中div中的图像变为0不透明度,然后显示背景图像.这意味着当您的悬停时,一个图像淡出,另一个图像出现.

此效果使用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淡出,当悬停在图像上时,然后在你离开时淡入.

Answer 1

这是你想要的？

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/