CODEWITHSUNDEEP
css
Golnaz Asadollahzadeh
Golnaz Asadollahzadeh

Reputation: 45

Change font color letter by letter in one word on hover

I want to change the color of each letter in one word when mouse over happens.

I use transition for doing this but I want this change to happen smoothly from left to right but I don't know why the ease-in timing function does not work. I want to change the color of my letters in such a way that div element moves.

The first one in this site is what I want: http://tympanus.net/Development/TextStylesHoverEffects/

<style>
    p {
        transition: all 0.5s ease-in;
    }

    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
        -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
        animation: mymove 5s infinite;
        animation-timing-function: linear;
    }

    .a:hover{
        color: cyan;
    }

    @-webkit-keyframes mymove {
        from {
            left: 0px;
        }

        to {
            left: 200px;
        }
    }

    @keyframes mymove {
        from {
            left: 0px;
        }

        to {
            left: 200px;
        }
    }
</style>

<body>
    <p class="a">HelloGolnaz</p>

    <div></div>
</body>

Sorry if this is a simple question and thank you.

Upvotes: 4

Views: 2197

Answers (2)

Mi-Creativity
Mi-Creativity

Reputation: 9664

First I want to say that @justinas's answer is a correct answer but I just wanted to modify his answer a bit to make use of the steps() function in CSS animation instead of CSS transition, so that it looks like it is being filled letter by letter.

Note that to simulate it the number of steps should be same as the number of letters

jsFiddle

.default,
.hover {
  font-size: 18px;
  font-weight: bold;
  color: #787878;
  cursor:pointer;
}
.hover {
  overflow: hidden;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  color: navy;
  white-space: nowrap;
}
.wrapper {
  position: relative;
  display: inline-block;
}
.wrapper:hover .hover {
  width: 100%;
  animation: stagger 2s steps(14);
}
@keyframes stagger {
  from {width: 0;}
  to {width: 100%;}
}
<div class="wrapper">
  <div class="default">SOME WORD HERE</div>
  <div class="hover">SOME WORD HERE</div>
</div>

Upvotes: 1

Justinas
Justinas

Reputation: 43507

You can use two divs one over another to create such effect:

.default,
.hover {
  font-size: 18px;
  font-weight: bold;
  color: #787878;
}
.hover {
  overflow: hidden;
  width: 0;
  position: absolute;
  left: 0;
  top: 0;
  color: #050;
  transition: width .5s ease-in-out;
  white-space: nowrap;
}
.wrapper {
  position: relative;
}
.wrapper:hover .hover {
  width: 100%;
}
<div class="wrapper">
  <div class="default">SOME WORD HERE</div>
  <div class="hover">SOME WORD HERE</div>
</div>

Upvotes: 4

Related Questions