Full animated background

Hi there,

You could try adding a CSS like this in Appearance > Customize > Additional CSS:

ul.wp-block-latest-posts__list.wp-block-latest-posts li:after{
    content:"";
    position:absolute;
    width:0;
    height:100%;
    background-color: rgb(0,100,0);
    top:0;
    left:0;
    transition: width 0.5s ease-in;
    z-index:-1;
}

ul.wp-block-latest-posts__list.wp-block-latest-posts li:hover:after{
    width:100%;
}

Kindly modify the values such as background-color and transition to your preference.

Hope this helps! :)

Yep, that worked but I can't set the font color to white after hover, why? I set the color: white; nothing happened?

If you would like to modify the text color on hover as well, try adding this CSS along with the previous CSS:

ul.wp-block-latest-posts__list.wp-block-latest-posts li:hover a {
    color:#fff;
}

Hope this helps! :)

Perfect thanks last question there is a slight lag or I am trying to say when I hover and the color change in the meantime the font color goes white so there is a lag or gap can I reduce it or sync it? (the box goes white while the color change because I set the font white)

Would you like to add transition when it comes to the color change as well? If so, try adding this:

ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    transition: color .5s ease-in;
}

Kindly modify .5 to your preference. :)

I already did that it's ok I will stick with it Thanks...

You’re welcome! :)