Transitioning opacity and visibility

Question

I have an element that is visibility: hidden until hovered over, with a transition on the opacity for a nice fade. The problem is that fade only works one way, beca

Answer 1

You don't need visibility:hidden; in .popup class since you won't see it anyway when its opacity is 0.

I don't actually know what exactly your case is. If this is not what you're looking for, please explain more specifically.

---

I have updated the code to meet your case. I use display: none instead of visibility:hidden and insert a simple Jquery code.

In my opinion, it should be nice if you make the .popup visible on clicking .label, instead of hovering it. The Jquery code for that should be

$(document).ready(function(){
    $(".label").click(function(){
        $(".popup").slideToggle("slow");
    });
});

$(document).ready(function(){
  $(".label").mouseover(function(){
   $(".popup").stop().slideDown("slow");
  });
  $(".popup").mouseout(function(){
   $(".popup").slideUp("slow");
  });
});

.hover {
  display: inline-block;
  position: relative;
}

.label {
  width: 80px;
  border: 1px solid black;
  padding: 20px;
}

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  
  display: none;
  opacity: 1;
  transition: opacity 3s;
}

/*.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}*/

  
Hover me
  
I am only visible on hover