-1

I'm trying to make an animation that when I "hover" an element, a content is displayed. This content is initially hidden.

So, only when the animation finished the content must be displayed, but it's not working.

See my code:

div{    
  width: 50px;
  height: 50px;
  padding: 35px 26px;
  border-radius: 50%;
  color: #000;
  background: green;
  font-size: 20px;
  transition: 0.4s linear;
}

.content{
  display: none;
  font-weight: initial;    
  transition-delay: 2s  /* not working */
}

.number .content{
  background: #1A1D56;
}

div:hover{
  border-radius: 0;
  width: 250px;  
  height: 80px;
}

div:hover .content{
  display: initial;
  opacity: 1;  
  transition-delay: 2s  /* not working */
}
<div class="group1">
  <span class="number n1">
        016
    <span class="content">
      bla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla
    </span>
  </span>
</div>

<div class="group2">
  <span class="number n2">
        201
    <span class="content">
      bla bla bla bla bla bla bla bla bla bla bla
    </span>
  </span>
</div>

However you can see that, when the green circle is "hovered", the text (content) is loaded instantaneously and this causes a visual estrangement. Also, when the text is large, it starts loading off the green area.

So I want to add a delay in loading it.

I read here at stackoverflow that it is not possible to use the transition-delay + display: none.

So, what can I do to solve this? How can I make the text appear only when the hover finishes

prady
  • 416
  • 2
  • 6
  • 17
Zkk
  • 741
  • 13
  • 29

1 Answers1

0

Did you try making content have an opacity of 0 and then on hover make it have an opacity of 1?

Chase Douglas
  • 124
  • 7