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!