Kevin Powell - Community•7mo ago

Pseudo Element clipping over text

I have an H1 tag that is currently outlined. I'm trying to add a Pseudo element which fills the color with white (to get rid of outline). The goal is to make a hover fill effect. Any tips? Thanks!

19 Replies

clevermissfox•7mo ago

Why not just fill in the color of the h1 on hover? Why a pseudo element ?

Matt•7mo ago

I wanted to make the color come in starting from the bottom

dysbulic 🐙•7mo ago

Animate a linear gradient on the h1.

Matt•7mo ago

Hmm let me try that

clevermissfox•7mo ago

I was literally just thinking that!

Matt•7mo ago

I might be doing this wrong

h1:hover {
    animation: changeColor 1000ms;
}

@keyframes changeColor {
    from {
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 0%);
        background-clip: text;
        -webkit-background-clip: text;
    }

    to {
        background: linear-gradient(0deg, rgba(255,255,255,1) 100%, rgba(255,255,255,0) 100%);
        background-clip: text;
        -webkit-background-clip: text;
    }
}

h1:hover {
    animation: changeColor 1000ms;
}

@keyframes changeColor {
    from {
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 0%);
        background-clip: text;
        -webkit-background-clip: text;
    }

    to {
        background: linear-gradient(0deg, rgba(255,255,255,1) 100%, rgba(255,255,255,0) 100%);
        background-clip: text;
        -webkit-background-clip: text;
    }
}

Matt•7mo ago

https://gyazo.com/262925695d4cadfb4eecf8f7aab6c057

Gyazo

Gyazo Screen Video

Matt•7mo ago

it goes away as soon as animation is done

dysbulic 🐙•7mo ago

Try:

h1:hover {
    animation: 1000ms linear changeColor;
}

h1:hover {
    animation: 1000ms linear changeColor;
}

Matt•7mo ago

I had that originally Still is a harsh transition

Matt•7mo ago

https://gyazo.com/1ab44edf213522ed57ed03b27b3e79b7

Gyazo

Gyazo Screen Video

Matt•7mo ago

I'm trying to have this kind of effect, but for filling the color

Matt•7mo ago

https://codepen.io/tutsplus/pen/ExxZPOQ

Envato Tuts+

CodePen

CSS Hover Effect: Techniques for Creating a Text Fill Wipe

In today’s tutorial, we’ll learn two different techniques for creating a fill text effect on hover. We’ll even go one step further and give ourselves t...

dysbulic 🐙•7mo ago

I was gonna say, most of the examples I've seen involve changing the background-position.

Matt•7mo ago

I tried to do that with the gradient as well but didn't seem to fix. Still won't transition properly

dysbulic 🐙•7mo ago

Did you look at the link?

Matt•7mo ago

Yeah, it seems to be doing it entirely different

dysbulic 🐙•7mo ago

It's got a background that's twice as tall as the text which is half red & half transparent & is changing its position.

Matt•7mo ago

Ohh I was looking at the link I sent completely missed yours Interesting thanks for making that codepen

Gaming

Programming

Pseudo Element clipping over text