CSS: transition opacity on mouse-out?

Question

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?

Demo here: https://jsfiddle.net/7uR8z/

I use Safari and it works perfectly even when I leave the object with the mouse... What is the problem? — AleVale94, May 12 '12 at 16:50
Nope, doesn't work for me! The transition works when I hover the red box! When leaving the red box with the mouse it "jumps" back to the full opacity - I want it to animate on mouse-out as well! — matt, May 12 '12 at 16:56

score 211 · Accepted Answer · edited Apr 12 '21 at 06:22

You're applying transitions only to the :hover pseudo-class, and not to the element itself.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: https://jsfiddle.net/7uR8z/6/

If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: https://jsfiddle.net/7uR8z/3/

score 1 · Answer 2 · edited Jan 11 '15 at 17:52

I managed to find a solution using css/jQuery that I'm comfortable with. The original issue: I had to force the visibility to be shown while animating as I have elements hanging outside the area. Doing so, made large blocks of text now hang outside the content area during animation as well.

The solution was to start the main text elements with an opacity of 0 and use addClass to inject and transition to an opacity of 1. Then removeClass when clicked on again.

I'm sure there's an all jQquery way to do this. I'm just not the guy to do it. :)

So in it's most basic form...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Thanks for the help everyone.

score 1 · Answer 3 · edited Apr 12 '21 at 06:22

1

$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Check the fiddle: https://jsfiddle.net/2k3hfwo0/2/

edited Apr 12 '21 at 06:22

Syscall

19,327
10
37
52

answered Jan 11 '15 at 17:49

CSS: transition opacity on mouse-out?

3 Answers3

Linked