Jump to content

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

Recommended Posts

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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