Day # 41: Hover word

A few days ago I came across a cool effect I saw on a website. When you hovered a particular word, the same content would show up on a larger scale, its letters would separate and then come together in a few seconds. I thought I could give it a try at copying it.

After doing some research, I found that the easiest way to show the same content in a different way would be by using the HTML attribute of data-text:

<a href="#" data-text="#100daysofsummercode">

                #100daysofsummercode

</a>

Then it’s just a matter of handling the pseudo element of before to add that bigger content. And finally we just need to set the letter-spacing property to break the text apart and put it together again:

.container a:hover::before {

    content: attr(data-text);

    left: 50%;

    opacity: 1;

    background-color: var(--clr);

    width: 250vh;

    height: 250vh;

    letter-spacing: 0;

}