Image Hover in Reverse using CSS

1
votes

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.

2
htmlcsswebkithoveropacity
you want the image to initially be visible, then after hover fade out? - kamalo

2 Answers

5
votes

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/

1
votes

You've created no rules that apply to the unhovered-image, so if you create some rules, as such:

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

JS Fiddle demo.

It should work as you wish.

For contrast, the same demo without the unhovered #info img rules: JS Fiddle demo, which seems to match your description.