Carousel B&W filter / mouse-over event disable

Is it possible to apply a black and white filter by default to the desktop version of a Testimonial carousel so that only on a mouse-over event would an item fade into full colour ?

The following page shows a simple way to achieve a greyscale solution, but I cannot seem to get it to work on the carousel:

#user-items-list-carousel__slides user-items-list-carousel__slides--initialized:hover img {filter: grayscale(50%)}

Hi,

Can you share link to page where you use carousel? We can check easier

Hi, thanks for your help:

https://pastille.london/construction-custom-woodwork

Many thanks for you help !

I modofied the code to work in reverse:

.user-items-list-item-container[data-section-id="62ffdd571fe4027515d357c3"] li img {
    filter: grayscale(100%);
}
.user-items-list-item-container[data-section-id="62ffdd571fe4027515d357c3"] li:hover img {
    transition: 0.5s;
    filter: grayscale(0%);
}
.user-items-list-item-container[data-section-id="62ffdd571fe4027515d357c3"] .user-items-list-carousel__slide {
    pointer-events: initial !important;   
}

The Transition property also makes it a little more elegant.

Cool and thank you for your time !