Techs Techs - 9 days ago 5
CSS Question

Text fill with colour CSS

I've been trying to implement a text colour fill from left to right using CSS as in the following codepen.io/anon/pen/oYojzZ

However, instead of filling in the text with colour, the background is being filled in. In this example the text colour black should be changing to pink rather than the background.

Any help is greatly appreciated.

Thanks

Answer

.tooltiptext {
    position: relative;
}
.popUpWord {
    color: pink;
}
.popUpWordBlack {
    color: black;
}
.outPop {
    margin: auto;
    background: none;
    width: 0;
    overflow: hidden;
    display: block;
    position: absolute;
    /* Unset our animation play state initially - this will reset the animation when the hover is no longer */
    animation-play-state: unset;
}
/* Since .outPop is hidden we add the style to either when the element is hovered or it's sibling is hovered */
.outPopBlack:hover + .outPop,
.outPop:hover{
    /* Turn our animation on when we are hovering over our element */
    animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
    display: block;
    position: absolute;
    z-index: -1;
}
@keyframes stripes {
    to {
        width: 32px;
    }
}
<span class="tooltiptext"> 
  <span class="outPopBlack">
    <span class="popUpWordBlack">hello</span>
  </span>  
  <span class="outPop">
    <span class="popUpWord">hello</span>
  </span>  
</span>