I have this simple HTML and CSS which swaps which
span
transition: ease-in-out 1s;
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>
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>