Image Over Automatically Transitioning Slideshow Gallery

I'm looking to code an image over the top of a gallery section. I'm wanting to put my client's logo over the top of the automatically transitioning slideshow gallery so that the logo stays static in the middle of the screen but the gallery proceeds behind it. This would need to work on both desktop and mobile. Please help! ❤️ 

I don't have a solution but it would help if we could see the gallery in question.

Also do you want to preserve the left/right click zones to change the images? This could have a bearing on a possible solution.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

@creedon

I don't want to preserve the arrows. I just want the slides to automatically transition in the background. I have that all set-up. I just need help figuring out how to add the logo image over the slideshow. 

https://lychee-plums-6cpy.squarespace.com/

password: test

Thanks in advance!

On 6/18/2023 at 1:12 AM, k8pq said:

I don't want to preserve the arrows. I just want the slides to automatically transition in the background. I have that all set-up. I just need help figuring out how to add the logo image over the slideshow. 

https://lychee-plums-6cpy.squarespace.com/

password: test

Thanks in advance!

You can add to Design > Custom CSS

body.homepage div.header-title-logo a {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
}
.homepage .header-title-logo {
    visibility: visible !important;
}

11 hours ago, tuanphan said:

You can add to Design > Custom CSS

body.homepage div.header-title-logo a {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
}
.homepage .header-title-logo {
    visibility: visible !important;
}

 

@tuanphan Hey, thanks so much! This works well for the existing site logo, but is it possible to put an alternative image in the center of the screen? I'd like to use a lighter color logo image that is larger in the middle of the homepage. 

Thank you so much!