Buy me a coffee

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"]

list-carousel-hover-image-change-to-another-image-02-min

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

list-carousel-hover-image-change-to-another-image-01-min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder