Fullscreen menu with hover animation - A step-by-step guide

HTML

For HTML we need a container with a list of menu items.

<div class="container">
    <ul class="menu">
        <li class="menu-item">HOME</li>
        <li class="menu-item">WELCOME</li>
    </ul>
</div>

CSS

For CSS, first we'll style the container.

We'll position it absolute, hovering the whole screen by setting top, bottom, left and right properties to zero.

Then we'll position the list in center using flexbox and set the background color to purple.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(167, 118, 221);
}

Now we're styling the list.

Remove the paddings and list style type.

We'll also display menu items in columns.

.menu {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

Now let's style manu items.

We'll set width, height and font size.

Now we'll displat text in center using flexbox and set transition so that hover effect (which we'll add later) is smooth.

Of course, we'll set cursor to pointer and a bit transparent text color.

.menu-item {
    height: 70px;
    width: 100vw;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in;
    cursor: pointer;
    color: rgba(0,0,0,.4);
}

On hover, we'll increase font size and set color to white.

We'll add a little text shadow and increase font weight.

With transition, this change will be nice and smooth.

.menu-item:hover {
    font-size: 35px;
    transition: .3s ease-out;
    color: #fff;
    text-shadow: 0px 0px 50px rgb(161, 95, 232);
    font-weight: 600;
}

And that is it.

You can get the full code and video tutorial here.

Thank you for reading. ❤️