Cubly Cubly - 16 days ago 6
CSS Question

How do I apply a fade effect to this text?

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

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>