Help to overlay a logo on a slideshow and make it dissolve

Hi. I'm looking for a way to add a logo on top of a gallery slideshow but to also make it dissolve after a few seconds. We want the logo to be front and center when people come to the site but we also want the images to be easily seen as the slideshow progresses. I know nothing about code but I'm hoping someone is able to help me do this. 

If I could also get the code to only have the logo overlay on the slideshow (no disappearing needed), that would be helpful too. I'd like the option to do one or the other as needed. I had looked up code to do this but couldn't get it to work on my site. Not sure what I was doing wrong.

Thank you!

Site: www.quadrant25.com
Site Password: Quadrant25

Hi,

What is site url?

On 4/2/2023 at 4:34 AM, tuanphan said:

Hi,

What is site url?

Thanks for replying! Sorry I missed it earlier. It's www.quadrant25.com. PW: Quadrant25

On 4/4/2023 at 12:19 PM, SupaJ said:

Thanks for replying! Sorry I missed it earlier. It's www.quadrant25.com. PW: Quadrant25

It looks like you solved it. Do you still need help?

On 4/7/2023 at 4:04 AM, tuanphan said:

It looks like you solved it. Do you still need help?

Hi, actually, I didn't solve it. I had a client meeting and was showing them an option for the logo. This is just one image edited to be on top of the other and then saved as one image. We'd still like to do what I mentioned in the initial post. Thanks!

On 4/13/2023 at 10:24 PM, tuanphan said:

Add to Design > Custom CSS

body.homepage .gallery-fullscreen-slideshow-list:after {
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2023_03/q25logo-removebg-preview.png.e677dab68841dca73c318bc3bcf5df03.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 250px !important;
    height: 250px !important;
}

super helpful, thank you! 

Hi! I used this code to get a logo on top of a slideshow, but now I'm trying to add an overlay to the slideshow. I have the overlay working but it's over the logo as well, which I would want it behind the logo. Any help would be appreciated!

https://carillon-grapefruit-wlya.squarespace.com/

PW: Pettit

On 12/1/2023 at 1:43 AM, kirstenmc said:

Hi! I used this code to get a logo on top of a slideshow, but now I'm trying to add an overlay to the slideshow. I have the overlay working but it's over the logo as well, which I would want it behind the logo. Any help would be appreciated!

https://carillon-grapefruit-wlya.squarespace.com/

PW: Pettit

Use this new code

body.homepage .gallery-fullscreen-slideshow:before {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}
body.homepage .gallery-fullscreen-slideshow:after {
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/v1/65159fd911f33a4395076310/0fa9125b-7522-42dd-9eef-d756ced1f49e/PAP_LOGO_111323.png?format=2500w);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 9999999;
    top: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 900px !important;
    height: 250px !important
}

@tuanphan Thank you for your previous response on this post. I tried using the above code as I was also wanting to add an overlay over my slideshow along with my logo on my landing page. Of course the above code is tailored to the previous poster so it shows their logo. Could you assist me with adding my logo? I would also like to add an "ENTER" button on my landing page that leads to my shop page below my logo. I am going for the same look as the lock screen but instead of the password box, an enter box and the logo placed a bit higher. Thank you so much in advance!

website: www.dergefrancois.com

password: derge*14

On 12/28/2023 at 6:58 AM, dergef said:

@tuanphan Thank you for your previous response on this post. I tried using the above code as I was also wanting to add an overlay over my slideshow along with my logo on my landing page. Of course the above code is tailored to the previous poster so it shows their logo. Could you assist me with adding my logo? I would also like to add an "ENTER" button on my landing page that leads to my shop page below my logo. I am going for the same look as the lock screen but instead of the password box, an enter box and the logo placed a bit higher. Thank you so much in advance!

 

website: www.dergefrancois.com

password: derge*14

So it will include

• slideshow image
• a logo over slideshow
• a button under logo, click button will open new page
• no password box
• Is that right?

Yes, that is correct! I would also like an overlay on the slideshow.

On 12/31/2023 at 8:45 AM, dergef said:

Yes, that is correct! I would also like an overlay on the slideshow.

Hi,

You can do this with List Section Banner Slideshow

First edit page where you want to add List Banner Slideshow > Add a Section

add a Section

Choose People > Choose section with (i) icon

Click Edit Content

and choose Design > Banner Slideshow