Code to display a watermark on images

Hi there.  I'm a complete newbie to coding and have been learning for the past few days by searching this forum but I can't find an answer to one of my questions.  I would like to know if there is a code I can use to add a semi-transparent watermark on the images displayed throughout my site.  Maybe it's not possible but would like some help if it is.  Thanks.

Hello,

It is possible to add a watermark/overlay to images using Custom CSS. However, if the purpose of adding a watermark is to protect them against copyright infringement, this wouldn't be a good solution as, right-click "save image", will download the image but not the watermark. 

Could you share a link to the images where you want to add an overlay. This will help with providing a custom code for you to use.

I understand, there is always a way to get the images if someone is determined enough.  But I have read there is also a code to disable right click and drag and drop to desktop.  Is it possible to to create codes for all of those things (watermark, disable right-click, disable drag and drop)?

Where do I find a link to send to you?  When I copy the link I see when I'm logged in and share it, the log in page for squarespace comes up.

10 hours ago, Wanderlust123 said:

I understand, there is always a way to get the images if someone is determined enough.  But I have read there is also a code to disable right click and drag and drop to desktop.  Is it possible to to create codes for all of those things (watermark, disable right-click, disable drag and drop)?

Where do I find a link to send to you?  When I copy the link I see when I'm logged in and share it, the log in page for squarespace comes up.

How to find page url

Thank you so much for that page, helped a lot!  Turns out I had to take my website out of private for everything to work.  Here is the link to the website:

https://dalmatian-flugelhorn-6yx4.squarespace.com

password: site123

I want to put a semi transparent watermark on the images on the main page and on all the images that will appear in each section under the 'Photos' main navigation button (currently have three sections).

14 hours ago, Wanderlust123 said:

Thank you so much for that page, helped a lot!  Turns out I had to take my website out of private for everything to work.  Here is the link to the website:

https://dalmatian-flugelhorn-6yx4.squarespace.com

password: site123

I want to put a semi transparent watermark on the images on the main page and on all the images that will appear in each section under the 'Photos' main navigation button (currently have three sections).

With Photos pages, add this to Design  > Custom CSS

/* test something */
.grid-image-inner-wrapper {
    position: relative;
}
.grid-image-inner-wrapper:before {
    content: "";
    display: block;
    background-image: url(https://cdn.pixabay.com/photo/2021/01/28/08/51/girl-5957398__340.jpg);
    background-size: contain;
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    top: 0;
    border-radius: 50%;
}

How can I replace the image that appears with a semi-transparent 

© Alexandra Cabrero

 at the bottom right hand side.

On 6/17/2021 at 1:48 AM, Wanderlust123 said:

How can I replace the image that appears with a semi-transparent 

© Alexandra Cabrero

 at the bottom right hand side.

 

You mean replace image with text or??

Yes, instead of the image have the text " © Alexandra Cabrero "

On 6/23/2021 at 4:51 AM, Wanderlust123 said:

Yes, instead of the image have the text " © Alexandra Cabrero "

You can add a Text Block >> Enter the text what you want.

Or do you have problem when using text block??

So sorry for the delay.  Haven't been able to work on the site for the past week.  

I tried adding a text block on the images but haven't been able to.