Custom Image Text Pop-Up

Hello, I am trying to figure out how to add custom pop up text like on this website (Home Page, Exclusive Collection). And really just how to create the entire section, with button and arrows below. Thank you!

Hi,

What is site url?

https://officialpartners.com/

Hello, I am trying to figure out how to add custom pop up text like on this website (Home Page, Exclusive Collection). And really just how to create the entire section, with button and arrows below. Thank you!

https://officialpartners.com/

On 5/4/2023 at 3:15 AM, KellyGidney said:

https://officialpartners.com/

You mean hover on each image >> Text box slide up?

You mean hover on each image > Text box slide up?

Yes! 

Yes, exactly! I would also like to know how to add the arrows and 'View Properties' below the images, like this website. Thank you!

On 5/6/2023 at 11:41 PM, KellyGidney said:

Yes, exactly! I would also like to know how to add the arrows and 'View Properties' below the images, like this website. Thank you!

I tried building this with List Banner Slideshow. You try checking

https://thung.squarespace.com/list-section-slideup?noredirect

Pass: abc

Yes, is this a feature in Squarespace? Or custom?

On 5/18/2023 at 4:05 AM, KellyGidney said:

Yes, is this a feature in Squarespace? Or custom?

It is custom code + List Section

You need to add List Section Slideshow

Next add some text

Next share link to page where you add them, we will give the code

Can you please give me the code to enter? 

On 7/8/2023 at 4:03 AM, KellyGidney said:

Can you please give me the code to enter? 

Have you added it yet? Can you share page url? We can check code easier

Add to Design > Custom CSS

/* List section slideup */
body.homepage {
.user-items-list-banner-slideshow .slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-banner-slideshow .slideshow-gutter {
    cursor: pointer;
}
li.slide.list-item {
    justify-content: flex-start !important;
    padding-bottom: 0 !important;
    align-items: flex-end !important;
}

.slide-content.list-item-card-background.list-item-rich-animation {
    width: 800px !important;
    transition: all 0.3s ease !important;
    transform: translateY(100%);
}

li:hover .slide-content.list-item-card-background.list-item-rich-animation {
    transform: translatey(0);
    transition: all 0.3s ease !important;
}

a.list-item-content__button:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
    transform: rotate(-90deg);
    display: block;
    color: black !important;
    border: 1px solid black;
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

a.list-item-content__button {
    background: transparent !important;
    border: none !important;
    color: transparent !important;
    padding: 0 !important;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
}