How do I apply a fade effect to this text?

Question

I have this simple HTML and CSS which swaps which

span

is visible when hovering over it.

I would like to add a fade effect to this, but I added

transition: ease-in-out 1s;

and nothing happened. Am I being really dumb?

div#text1 span#s1main {

  display: inline;

}



div#text1:hover span#s1main {

  display: none;

}



div#text1 span#s1morph {

  display: none;

}



div#text1:hover span#s1morph {

  display: inline;

}

<div id="text1">

  <span id="s1main">Hello World</span>

  <span id="s1morph">Secondary Text</span>

</div>

Thanks for any assistance.

Answer 1

Umm dispay none wouldnt work with transition, you might have to play with opacity and position of the element to get it working.

div#text1 span#s1main {
  opacity:1;
  transition: 0.8s all;
}

div#text1:hover span#s1main {
  opacity:0;
}

div#text1 span#s1morph {
  position:absolute;
  left:10px;
  opacity:0;
  transition: 0.8s all;
}

div#text1:hover span#s1morph {
  opacity:1;
}

<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

How do I apply a fade effect to this text?

Sign up