How to add / overlay an image on top of a slideshow

Hi SS Forum,

I am trying to overlay my png. logo file over a slideshow gallery in square space. Does anyone know a code for this?

As my logo file is not text but an image, I am having troubles overlaying this onto a slideshow or gallery.

Thank you

Hi there

It will be helpful if you can show your site url and password if there is so that we can check the actual issue

Hi, Thanks for your reply!

I have attached a link to my home / landing page.

https://dog-wrasse-bzts.squarespace.com/

I would like to put the 'atoma' logo which is a png file onto of the slide show which is in the section below.

I have attache an image of what I would like it to look like.

Thank for your time.

Bel

1 hour ago, Bel_SquareSpace said:

Hi, Thanks for your reply!

 

I have attached a link to my home / landing page.

https://dog-wrasse-bzts.squarespace.com/

 

I would like to put the 'atoma' logo which is a png file onto of the slide show which is in the section below.

I have attache an image of what I would like it to look like.

 

Thank for your time.

Bel

 

Here is quick fix, I would rather remove the logo above the gallery and placed it in a psuedo selector like so:

[data-section-id="5ee7179706a84020c0827f31"]:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    background: url(https://images.squarespace-cdn.com/content/v1/5ecdccf…/1591688009917-9L6KA56ARAJ5AYDGP4U5/ke17ZwdGBToddI8pDm48kMPu3vAJVIO2ksrI68T0UXN7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0lR3JoLcFN0gowL4YjRNPWLlZQxB-p3EIYj4hAcpIkFDV1BUhAbjQ5LiUZFLBYUrIg/atoma+SMALL+pink+trans.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

https://prnt.sc/szxftm

Hi bangank36,

Thank you so much for your quick reply. This works so well. appreciate the advice.

The only issue is that the links that I have setup for the images in the gallery don't seem to working now.

I have setup links to go to my selected projects page. - link below.

https://dog-wrasse-bzts.squarespace.com/portfolio

Kind regards,

Bel

27 minutes ago, Bel_SquareSpace said:

Hi bangank36,

Thank you so much for your quick reply. This works so well. appreciate the advice.

 

The only issue is that the links that I have setup for the images in the gallery don't seem to working now.

I have setup links to go to my selected projects page. - link below.

 

https://dog-wrasse-bzts.squarespace.com/portfolio

 

Kind regards,

 

Bel

 

This may help, pls kindly mark the question once it done, thanks

<style>
[data-section-id="5ee7179706a84020c0827f31"]:after {
    content: " ";
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: url(https://static1.squarespace.com/static/5ecdccf…/t/5ee735e…/1592210915203/atoma_colour_cmyk_PNG+white+smallest.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
</style>

hi

bangank36,

This worked well except that the logo image itself doesn't allow you to click through and the logo is cut off on the mobile website.

Thank you 

Bel

Hey @Bel_SquareSpace, yes an issue with the psuedo approach is that the element won't be clickable because you can't insert an HTML link. You should be able to get the desired effect and still have it clickable. 

4 minutes ago, ryandejaegher said:

Hey @Bel_SquareSpace, yes an issue with the psuedo approach is that the element won't be clickable because you can't insert an HTML link. You should be able to get the desired effect and still have it clickable. 

Maybe I solution not ideal, please suggest us a proper one that meet the requirement, thanks

@Bel_SquareSpace would you want this logo to be visible over all the slideshow items or just one?

Hi Ryan,

It would be great for it be over all of the slideshow images.

So the logo would remain in the same place as the images in the slideshow slide behind it.

Thank you!!

Bel