List Carousel: Hover Image – Change to another image

#1. First, install Squarespace ID Finder and find the ID of the List Carousel Section.

In my example, we will have:

section[data-section-id="6642c62d7ab3ae4f40e3aed2"]

#2. Use this code to Custom CSS box

/* Client Testimonials */
section[data-section-id="6642c62d7ab3ae4f40e3aed2"] {
li.user-items-list-carousel__slide.list-item {
    pointer-events: initial !important;
}
img.user-items-list-carousel__media[src*="Cara+Hoever"]:hover {
    content: url(https://cdn.pixabay.com/photo/2024/03/31/06/16/bird-8666099_1280.jpg);
}
img.user-items-list-carousel__media[src*="Kevin+Hover"]:hover {
    content: url(https://cdn.pixabay.com/photo/2023/01/15/08/55/dog-7719758_1280.jpg);
}
img.user-items-list-carousel__media[src*="Aro+Ha"]:hover {
    content: url(https://cdn.pixabay.com/photo/2023/06/16/15/14/sunset-8068208_1280.jpg);
}}

Ask me a question, free