Hover animation

I'm trying to achieve the hover animation of color which is on the hero page. https://www.ellenasm.com/

<div class="wrapper">
    <span class="char">P</span>
    <span class="char">R</span>
    <span class="char">O</span>
    <span class="char">D</span>
    <span class="char">U</span>
    <span class="char">C</span>
    <span class="char">T</span>
</div>

<div class="wrapper">
    <span class="char">P</span>
    <span class="char">R</span>
    <span class="char">O</span>
    <span class="char">D</span>
    <span class="char">U</span>
    <span class="char">C</span>
    <span class="char">T</span>
</div>

.char{
    font-size: 4rem;
}
.char:hover{
    color: #f889b8;
    transition: color 2s;
}

.char{
    font-size: 4rem;
}
.char:hover{
    color: #f889b8;
    transition: color 2s;
}

it's going from dark to the given colour, how should i change that.

ellenasmco

Elena Smirnova

Home

5 Replies

Wolle•2y ago

And your Problem is? That site you linked is a giant pile of animations and transitions. Try to describe what you want and how it differs from what you have, then somebody can help you.

Jochem•2y ago

You have to specify separate times for the in and out transition:

.char{
  font-size: 4rem;
  transition: color 2s;
}
.char:hover{
  color: #f889b8;
  transition: color 0s; /* Improved from Mark's answer, didn't realize 0s would work for some reason */
}

.char{
  font-size: 4rem;
  transition: color 2s;
}
.char:hover{
  color: #f889b8;
  transition: color 0s; /* Improved from Mark's answer, didn't realize 0s would work for some reason */
}

you have to sit through the painful opening animation with low contrast, and then a big block of text appears where the letters light up when you hover over them and slowly fade back out

MarkBoots•2y ago

In this case the color transition on hover is (almost) immediate (0s) and the transition duration kicks in when the hover state is removed. so the normal state has the duration 2s something like this

/* I just noticed jochem said exactly the same, so removed the duplicate */

/* I just noticed jochem said exactly the same, so removed the duplicate */

Wolle•2y ago

With ctrl+shift+c you can activate the devtools and element picker, then you can check the element in the devtools (and use the filter):

Abdul Ahad⚡OP•2y ago

understood. the key thing i missed was the animation starts after the hover event is done. i was checking only the hover state. didn't check the default state 😄 . thanks for the tip. thank you guys.

Gaming

Programming

Hover animation