style.css

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e32727;;
}

ul{
    margin: 0;
    padding: 0;
    display: flex;
}

ul li{
    list-style: none;
    margin: 0 20px;
    transition: 0.5s;
}

ul li a{
    display:block;
    position: relative;
    text-decoration: none;
    padding: 5px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color:#fff;
    text-transform:uppercase;
    font-weight:500;

}

ul:hover li a{
    transform: scale(1.5);
    transition: 0.5s;
    opacity: 0.2;
    filter:blur(5px)
}

ul li a:hover{
    transform: scale(2);
    opacity: 1;
    filter: blur(0px);
}

ul li a:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background: #232f3e;;
transition: transform 0.5s;
transform-origin: right;
transform: scaleX(0);
z-index: -1;
}

ul li a:hover:before{
    transition:transform 0.5s;
    transform-origin: left;
    transform: scaleX(1);   
}