CODEWITHSUNDEEP
htmlcsshyperlinkhovercss-transitions
Nathan R
Nathan R

Reputation: 870

Need help getting smooth CSS transition of text content

I've got this cool CSS transition effect on a link (called "Links"), where two additional links appear when you hover over it. On top of that, the word "Links" itself changes to "LinkedIn".

The problem is, the opacity transitions for the two extra links is very smooth, and the text transition of "Links" to "LinkedIn" is not. It just immediately switches on hover.

Is there any way to get it smoother to match the other links? Somehow fading from Links to LinkedIn?

Thanks! 

.links {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  color: white;
  font-family: 'heebo';
  font-size: 30px;
  text-align: center;
  width: 140px;
}
.links ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.linksG {
  color: #F28500;
  text-decoration: none;
  opacity: 0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.linksL:before {
  color: white;
  text-decoration: none;
  content: 'Links';
  transition: content 1s;
  -moz-transition: content 1s;
  -webkit-transition: content 1s;
}
.linksS {
  color: #D95D39;
  text-decoration: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
  opacity: 1.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
  opacity: 1.0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
  content: 'LinkedIn';
  text-decoration: none;
  transition: content .55s;
  -moz-transition: content .55s;
  -webkit-transition: content .55s;
}
<body style="background-color: black;">
  <div class="links">
    <ul>
      <li>
        <a class="linksG" href="http://github.com">Github</a>
      </li>
      <li>
        <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
      </li>
      <li>
        <a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

Upvotes: 2

Views: 1560

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

Well you cannot use css transition when you are changing text but you can add other text in :before and show it on hove with opacity

.links {
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  color: white;
  font-family: 'heebo';
  font-size: 30px;
  text-align: center;
  width: 140px;
}
.links ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.linksG {
  color: #F28500;
  text-decoration: none;
  opacity: 0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.contentClass{
  position:relative;
}
.linksL:before {
  position:absolute;
  left:0;
  color: white;
  text-decoration: none;
  content: 'Links';
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.linksL:after {
  position:absolute;
  left:0;
  color: white;
  opacity:0;
  text-decoration: none;
  content: 'Linkedin';
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
.linksS {
  color: #D95D39;
  text-decoration: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
  opacity: 1.0;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
  opacity: 1.0;
  transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
  opacity:0;
  text-decoration: none;
  transition: opacity .55s;
  -moz-transition: opacity .55s;
  -webkit-transition: opacity .55s;
}
.links:hover .linksL:after {
  opacity:1;
  text-decoration: none;
  transition: opacity .55s;
  -moz-transition: opacity .55s;
  -webkit-transition: opacity .55s;
}
<body style="background-color: black;">
  <div class="links">
    <ul>
      <li>
        <a class="linksG" href="http://github.com">Github</a>
      </li>
      <li class="contentClass">
        <a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
      </li>
      <li>
        <a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
      </li>
    </ul>
  </div>
</body>

Upvotes: 1

Related Questions