Html – Image Hover in Reverse using CSS

csshoverhtmlopacitywebkit

I have a css image hover effect, in which the image in the div turns to 0 opacity and then the background image is displayed. This means as your hover, one image fades out and the other appears.

This effect uses CSS and webkit.

But the issue is that when you hover over the image the effect takes place but not in reverse, meaning it does not fade in when you leave the image. But that is the effect I want.

This is the HTML markup…

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

This is the CSS markup…

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

So overall I want the infow.png to fade out, when hover over the image then fade back in when you leave.

Best Answer

Is this what you are looking for?

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 Fiddle: http://jsfiddle.net/AXQW4/1/

EDIT: If you want to display a different image when hovering, you can add it as a background-image behind the original: http://jsfiddle.net/8qzcY/

Related Topic