8 replies

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.

Elena Smirnovaellenasmco

Home

KP-C

Kevin Powell - Community•4y ago•

8 replies

Abdul Ahad⚡

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.

Elena Smirnovaellenasmco

Home

Hover animation

Similar Threads

Hover animation

Similar Threads

Similar Threads

Similar Threads