Golnaz Asadollahzadeh Golnaz Asadollahzadeh - 4 months ago 12
CSS Question

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 happens 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 u.

Answer

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>