Jump to content

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

Recommended Posts

  • Replies 10
  • Views 2.8k
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

 

Screen Shot 2020-06-14 at 11.12.37 pm.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.