CODEWITHSUNDEEP
csscss-transitions
Ryan
Ryan

Reputation: 1236

Transitioning opacity and visibility

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, because when the element instantly becomes visibility: hidden which hides the opacity transition. How can I work around this?

Edit: To be clear, it is important that the element have visibility: hidden until the hover is activated. An element with opacity: 0 can be interacted with, while an element with visibility: hidden cannot.

Example below. Notice how the popup fades in, but not out.

.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;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity 3s;
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}
<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

Upvotes: 1

Views: 7042

Answers (2)

LKG
LKG

Reputation: 4192

You only applied transition on opacity, if you need the transition works several properties you have to use all or use property names.

Just change below css part

.popup {
  width: 90px;
  padding: 15px;
  position: absolute;
  top: 100%;
  border: 1px dashed black;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}


.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;
  visibility: hidden;
  opacity: 0;
  transition: all 3s; /*Change the opacity to all*/
}

.hover:hover .popup {
  visibility: visible;
  opacity: 1;
}
<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

Upvotes: 7

Chanh Tran
Chanh Tran

Reputation: 231

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;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">
  <div class="label">Hover me</div>
  <div class="popup">I am only visible on hover</div>
</div>

Upvotes: -1

Related Questions