Question 298265 in Html Question posted in
Some basic documentation can be found here.

Html – Making text colour inverted to background-colour css proprety for smooth transitions

I’ve got this thing right now where I’ve got this sliding background on hover, and I find it a bit janky that all of the text changes colour at the same time. Can I somehow make it so that only the parts over the black background change colour?

a.nav {
    font-family: Manrope;
    font-weight: 400;
    text-decoration: none;
    color: #000;
    background-image: linear-gradient(to bottom, transparent 1px, #000 1px);
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 0%;
    transition: background-size .15s;
}
a.nav:hover {
    color: #fff;
    background-size: 100%;
    background-position-x: left;
}
<a class="nav">About us</a>

THANK YOU!!

Tags:

2

Answers


  1. 0

    I got half the solution posting here to help someone find the remaining 🙂 !

    a.nav {
position: relative;
  font-family: Manrope;
  font-weight: 400;
  text-decoration: none;
  color: #000;
}

a.nav:after {
  content: 'About us';
  font-family: Manrope;
  font-weight: 400;
  text-decoration: none;
  color: #000;
  background-image: linear-gradient(to bottom, transparent 1px, #000 1px);
  background-repeat: no-repeat;
  background-position-x: right;
  background-size: 100%;
  visibility:hidden;
  position: absolute;
  width:0px;
  left:0px;
  top:0px;
  transition: all 2s;
  color: #fff;
  white-space: nowrap;
  overflow:hidden;
}

a.nav:hover:after {
  visibility:visible;
  width:100%;
}
    <a class="nav">About us</a>
    Login or Signup to reply.
  2. 0

    The problem lies with the :hover psuedoclass. You are saying, the moment the user hovers, change the text color to white. However, since this applies it to all the text, and the text is one element, you could do a workaround, by creating multiple elements for each text. But this could take a while and not be efficient. Instead, use keyframes:

    a.nav {
  font-family: Manrope;
  font-weight: 400;
  text-decoration: none;
  color: #000;
  background-image: linear-gradient(to bottom, transparent 1px, #000 1px);
  background-repeat: no-repeat;
  background-size: 0%;
  animation-name: hoverAnimation;
  animation-play-state: paused;
  animation-duration: 3s;
  animation-fill-mode: forwards /*The forwards makes the element keep its final state. Set this to none if you don't want this.*/
}
a.nav:hover {
  animation-play-state: running;
  animation-iteration-count: 1 /*Make this repeat only once.*/
}

a.nav:not(:hover) {
  animation-fill-mode: none /*Make it return to its original state after off hover*/
}

@keyframes hoverAnimation {
  0% {
      background-position-x: left;
  }
  
  100% {
    background-size: 100%;
    background-color: black;
    color: white
  }
}
    <a class="nav">About us</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search