Change List Carousel image on hover

To change the list carousel image to other images on hover, you can follow these.

#1. First, find the List Carousel Section ID.

In my example, it is:

section[data-section-id="6580a6d2d612563e16170f25"]

#2. Use this code to Custom CSS box

section[data-section-id="6580a6d2d612563e16170f25"] {
.user-items-list-carousel__slide {
pointer-events: initial !important;
}
li:nth-child(1):hover img {
content: url(https://cdn.pixabay.com/photo/2023/12/13/15/24/st-isaacs-cathedral-8447100_1280.jpg);
}
li:nth-child(2):hover img {
content: url(https://cdn.pixabay.com/photo/2023/02/07/17/02/trumpet-7774590_1280.jpg);
}
li:nth-child(3):hover img {
content: url(https://cdn.pixabay.com/photo/2024/06/21/07/46/yoga-8843808_1280.jpg);
}
li:nth-child(4):hover img {
content: url(https://cdn.pixabay.com/photo/2024/07/06/08/10/flowers-8876324_1280.png);
}}

#3. If you want to add smooth on hover, you can use this new format

section[data-section-id="6580a6d2d612563e16170f25"] {
  .user-items-list-carousel__slide {
    pointer-events: initial !important;
}
  li:nth-child(1) {
    .user-items-list-carousel__media-inner {
      background-image: url(https://cdn.pixabay.com/photo/2023/12/13/15/24/st-isaacs-cathedral-8447100_1280.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      transition: all 0.3s ease;
    }
    &:hover img {
      opacity: 0;
      transition: all 0.3s ease;
    }
    img {
      transition: all 0.3s ease;
    }
  }

li:nth-child(2){
    .user-items-list-carousel__media-inner {
      background-image: url(https://cdn.pixabay.com/photo/2023/02/07/17/02/trumpet-7774590_1280.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      transition: all 0.3s ease;
    }
    &:hover img {
      opacity: 0;
      transition: all 0.3s ease;
    }
    img {
      transition: all 0.3s ease;
    }
}

li:nth-child(3){
    .user-items-list-carousel__media-inner {
      background-image: url(https://cdn.pixabay.com/photo/2024/06/21/07/46/yoga-8843808_1280.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      transition: all 0.3s ease;
    }
    &:hover img {
      opacity: 0;
      transition: all 0.3s ease;
    }
    img {
      transition: all 0.3s ease;
    }
}
li:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2024/07/06/08/10/flowers-8876324_1280.png);
}}