CODEWITHSUNDEEP
htmlcss
Techs
Techs

Reputation: 189

Text colour fill from left to right using CSS

I am trying to animate the text having class ".popUpWord". On hover, I would like to do a colour animation with the colour of text changing from left to right.

<span class="popUpWord">hello</span>

What I would like to do is similar to this one - Animate text fill from left to right , but I want it to be filled in from left to right and stop, rather than repeating it.

Is this possible through css please?

Upvotes: 7

Views: 16731

Answers (3)

Matiiv Vasyl
Matiiv Vasyl

Reputation: 127

We can use the new feature background-clip:text. First, we set our color as transparent (this will make our background color visible), then set the background as a gradient with two colors at 50% each (the first color is the one we will transition to, and the second color is the base color). Next, we set our background-size to 200% and background-position to 100% (this will make visible only our second color). Finally, we add the hover effect with background-position:0;

h1{
  color: transparent;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  
  transition: background-position 1s ease;
}
h1:hover{
  background-position:0;
}
<h1>Some text</h1>

background position.

Upvotes: 2

Hendeca
Hendeca

Reputation: 943

I stumbled upon this years after it was answered. The accepted answer does not work with different background colors as far as I can tell. For example I tried it with a dark grey background and it create a dark box behind the text that I didn't want.

I looked for other solutions and found this one. Basically you have two instances of the same text exactly positioned on top of each other. The text is positioned using css-grid's justify-content: start and has overflow:hidden on with a width of 0.

On hover, the width of the fill-text div is increased which effectively achieves the same effect: revealing the overlay text from left to right. There is an extra div wrapped around the overlay text that is wide enough to fit the entire width of the text. This prevents the text from jumping down to the next line when the div is increasing in size.

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}
<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>

Upvotes: 2

jafarbtech
jafarbtech

Reputation: 7015

add an outer div add mix-blend-mode: multiply; when :hover

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}
<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>

Upvotes: 10

Related Questions