Jump to content

Custom Image Text Pop-Up

Recommended Posts

  • Replies 14
  • Views 711
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 weeks later...

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.