Scrolling Services Section

Hey guys, how can I customize my site like this? 

This is auto-scrolling that stops when pointed at by a cursor. Also, how can I place card and text over an image (tried putting it together but it ruins the quality of the text. Please help your girl out, thank you so much!

The sample site is: https://www.hersocial.com.au/

@khaydesignsstudio Hi! Using a fair amount of custom code, it can be implemented using the Auto Layout (Simple List) section. It will take some time to implement.

Hey Sam! Thank you for this, could you help me a little with the code? 

On 6/24/2024 at 10:13 AM, khaydesignsstudio said:

Hey Sam! Thank you for this, could you help me a little with the code? 

To achieve layout same as screenshot, you can use this code to Website Tools > Custom CSS box. Here you can change ratio of Image to increase Image height

ul.user-items-list-item-container.user-items-list-simple {
    grid-gap: 5px !important
}
.user-items-list-simple .list-item {
    position: relative;
}
.list-item-content {
    position: absolute;
    width: 80%;
    transform: translateX(-50%);
    left: 50%;
    bottom: 50px;
    background: #c8ad9c;
    padding: 10px
}
.list-item-content p {
    color: #fff;
    font-family: serif;
}
.list-item-content h2 {
    color: #fff !important;
    font-family: serif;
}
.user-items-list-simple .list-item-media {
    margin-bottom: 0 !important;
}
.list-item-content__description:after {
    content: "\e004";
    font-family: 'squarespace-ui-font';
    display: block;
    font-size: 30px;
    color: #fff !important;
    text-align: right
}