Change background for every menu item on hover

How To
1

Good morning, i have this code for my menu that it change the background image on hover of row.
I would like to make the same but for every item of my menu, so when i go on hover Homepage, it appears an image, when i go on hover About Us it appears another different image and so on.
Could you help me to understand how it will be possibile to make it.

Here the main css code:

@media (min-width: 1025px){
  
root .br-column:nth-of-type(1)::after{
        left: 0;
  z-index:1;
        background-image: 
          linear-gradient(90deg, var(--shade-ultra-light) 50%, rgba(242, 242, 242, 0) 80%),
          url('https://element.how/wp-content/uploads/2020/06/computer-768696_1280.jpg');
}
  
root .br-column:nth-of-type(2)::after{
        left: 0;
  z-index:1;
        background-image: url('https://porticciolo.salone24.it/wp-content/uploads/2022/12/home_tab_walking_s-min.jpg');
}
root .br-column:nth-of-type(3)::after{
        left: 0;
        background-image: url('https://element.how/wp-content/uploads/2020/03/4.jpg');
}
    root .br-column .br-element {
        z-index: 9;
    }
    root .br-column .hovershow{
        opacity: 0;
    }
    root .showbydefault{
        opacity: 1;
      z-index:40!important;
    }
    root .showbydefault, root .hovershow{
        transform: translateY(40px);
        transition: transform 0.44s ease, opacity  0.44s ease;
    }
    root .br-column:hover .br-element{
        opacity: 1;
        transform: translateY(0);
    }
root .br-column::before{
        position: absolute;
        content:'';
        height: 100vh;
        width: 100%;
        z-index: 7;
        pointer-events: none;
        opacity: 0;
    }
root .br-column::after{
        position: absolute;
        content:'';
        height: 100vh;
        width: 100vw;
        top:0;
        background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
        z-index: 4;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.44s;
    }
root .br-column:hover::after{
        opacity: 1;
    }
}
root .br-column::before{
        position: absolute;
        content:'';
        height: 100%;
        width: 100%;
        opacity: 0;
        background-color: white;
    }

Here the demo page: https://porticciolo.salone24.it/

The menu it appears when you click the burger icon on the page.

Many thanks
Davide

1 Like