Team Carousel CSS

Some CSS code for Team Carousel (List Carousel). You can use code to Custom CSS.

#1. Add a dark overlay over image on hover

li.user-items-list-carousel__slide:hover img {
    filter: brightness(0.5) !important;
}
li.user-items-list-carousel__slide {
      pointer-events: initial !important;
}

#2. Remove background behind arrows

div.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-color: transparent !important;
}

#3. Change arrow circle to square

button.user-items-list-carousel__arrow-button {
    border-radius: 0 !important;
}

#4. Change arrow color

button.user-items-list-carousel__arrow-button path {
    stroke: #000 !important;
}

#5. Change weight of arrows

button.user-items-list-carousel__arrow-button path {
    stroke-width: 1px !important;
}

#6. Reduce space under carousel image

div.user-items-list-carousel__media-container {
    margin-bottom: 5px !important;
}

#7. Round corners of images

div.user-items-list-carousel__media-inner {
    border-radius: 20px;
}

#8. Round top left/bottom right corners of images

div.user-items-list-carousel__media-inner {
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#9. Add an outline around image

div.user-items-list-carousel__media-inner {
    border: 2px solid #f1f;
}

#10. Add an outline and white padding between outline – image

div.user-items-list-carousel__media-inner {
    border: 2px solid #f1f;
}
div.user-items-list-carousel__media-inner img {
    padding: 5px;
    width: calc(~"100% - 10px") !important;
    height: calc(~"100% - 10px") !important;
}