css Any one of you nice people know how to reposition list carousel images using CSS?

I'm creating my testimonials in a list carousel and would like the images of the people to overlap the card. I am having a heck of time. I've tried all sorts of codes (targeting the image/ the container using overflow and none of them work.)
 Does it have something to do with the section above because when I apply a negative margin value the images are obscured. 

I would be so grateful for even a CLUE on how to make this work?

(The password for the site is: me)

Hi,

What is page url?

https://cube-kazoo-8lpm.squarespace.com/ Thanks Tuanphan! 

On 10/25/2023 at 2:41 AM, andreallevin said:

https://cube-kazoo-8lpm.squarespace.com/ Thanks Tuanphan! 

Add to Website Tools (under Not Linked) > Custom CSS

/* testimonial */
.user-items-list-item-container[data-section-id="64ee3fc86963f41f1d41ca12"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -68px;
    z-index: 9999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 100px !important;
}}
body {
    overflow-x: hidden;
}

Hello! I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half) in the testimonial section (middle of home page). I'm wondering if I could please get some help with this. TIA!

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

This is the code I currently have:

/* testimonial */
.user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -100px;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 120px !important;
}}
body {
    overflow-x: hidden;
}

On 4/21/2024 at 8:29 AM, daniellemusarra said:

Hello! I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half) in the testimonial section (middle of home page). I'm wondering if I could please get some help with this. TIA!

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

This is the code I currently have:

/* testimonial */
.user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -100px;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 120px !important;
}}
body {
    overflow-x: hidden;
}

You can use this CSS code under above code

.user-items-list-carousel__slides-revealer {
    overflow: visible !important;
}
body, html {
    overflow-x: hidden;
}