Css: Transition Opacity on Mouse-Out

CSS: transition opacity on mouse-out?

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/

Transition on mouse out is not working

The reason your transition is not working on mouseout is that you have used opacity 0.5s ease-in-out in your css whereas you have also used visibility: hidden on your css selector .play-icon-hover. So you need to use transition: all 0.5s ease-in-out. Try this code.

.play-icon-hover {
    position: absolute;
      width: 100%;
    height: 100%;
      opacity: 0;
      transition: all 0.5s ease-in-out;
}

How to set a transition for when mouse leaves an element (hover off)?

You should add a class "shown" to your visible image and then add this piece of CSS:

.my-reveal .shown { 
  z-index: 2;
  opacity: 1;    
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;  
}
.my-reveal:hover .shown { 
  z-index: -1;
  opacity: 0.3;    
}

This will allow your visible image to have a not-hover state with opacity 1 and a hover state with an ease-in-out smooth animation.

CSS Hover Out / Mouse Out Transition?

I set the opacity of the div to zero so it won't be visible but it's still a in display mode block and when your mouse is out of the element it's start to fade out as you wanted.

Add this to your css:

.top-links li.music:hover + div.musictest {

       opacity:1;
       transition: opacity 0.1s;
       -moz-transition: opacity 0.1s;
       -webkit-transition: opacity 0.1s;
       -o-transition: opacity 0.1s;
    }

  .top-links li.music + div.musictest {
       opacity:0;
       display:block;
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;
    }

And here is a working example

Trigger opacity transition on mouse in and out

DEMO HERE

Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class

• Whether cursor has entered element

• Whether cursor has left element

Below is how you could actually do it.

var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
    $('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
    if ($.contains($('.wrapper')[0], e.target)){
        if(!entered)
        {
            //just to do it once and not on every mousemove you need to check here whether 
            //it has already entered and moving inside the element
            entered=true;
            left=false;//to check the vice versa operation
            $('.cursor').fadeOut('fast',function(){
                //callback function after fadeOut completes
                $(this).removeClass('green').addClass('red');
            }).fadeIn('fast');
        }
    }else{
        if(!left)
        {
            left=true;
            entered=false;
            //same goes here too
            $('.cursor').fadeOut('fast',function(){
                $(this).removeClass('red').addClass('green');
            }).fadeIn('fast');
        }
    }  
});

CSS3 mouseout transition not working as expected

You need to apply your transition properties to the non-hovered class as well, like this:

.readMoreLink {
  color:#ACACAC;
  opacity: 0; 
  text-align: center;
  -webkit-transition-duration: 2s; /* Safari */
  -webkit-transition-delay: 1s; /* Safari */
  transition-duration: 2s;
  transition-delay: 1s;
}

.item:hover .readMoreLink {
  -webkit-transition-duration: 2s; /* Safari */
  -webkit-transition-delay: 1s; /* Safari */
  transition-duration: 2s;
  transition-delay: 1s;
  opacity: 1;
}

See here: https://jsfiddle.net/bLmw0xzu/

CSS transition fade on hover

I recommend you to use an unordered list for your image gallery.

You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.

#photos li {
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

#photos li:hover {
    opacity: 1;
}

fade out transition for .mouseout using .animate?

You can use the .animate() method with either opacity or visibility. There is no reason to use both.

If you can't figure out which one to use read this answer here.

$("#show_stats1 h1").mouseover(function() { 

  $(".stat-1_info").animate({opacity: 1}, 200);

});

$("#show_stats1 h1").mouseout(function() { 

  $(".stat-1_info").animate({opacity: 0}, 200);

});

.stat-1_info {

  opacity: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="show_stats1" class="stats">

    <h1>main, visible div</h1>

</div>

<div class="stat-1_info">

    hidden div to be shown on hover

</div>

---

Related Topics