[Share] Change List Carousel image on hover

Some CSS code to change List Carousel image on hover. You can use code to Website Tools > Custom CSS.

If you can't make it work, you can send link to page where you use Carousel, I can check again easier.

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

In my example, it is

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

#2. Next, 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 remove #2, and use this new CSS code

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;
    }
}
}