Overlay an image on top of a slideshow

Hi there!

I am trying to overlay a .png of a brushstroke over a slideshow, but I am having a little trouble with the code. Or maybe there is another way to achieve the effect?

https://springbrookbc.squarespace.com
Pw: c@mp1ng

You can see on the alternate slides I created the images with the stroke at the bottom, but when they scroll through you can see the edges. I thought the best way around that would be to add a static image overlay so the images rotate below it.

Thanks so much!

@jpeter Thank you so much! It worked perfectly!

Hi @jpeter I have used this code on my website and it works perfectly for one image to be overlaid over my slideshow gallery, however I'm wanting a paper tear graphic to be both top and bottom. I've tried duplicating the code and updating the URLs and positions of my two paper tear graphics however if I add the code in twice it deletes the first image. is there a way to show two images using this?

On 7/16/2024 at 6:42 PM, LuckyAndSon said:

Hi @jpeter I have used this code on my website and it works perfectly for one image to be overlaid over my slideshow gallery, however I'm wanting a paper tear graphic to be both top and bottom. I've tried duplicating the code and updating the URLs and positions of my two paper tear graphics however if I add the code in twice it deletes the first image. is there a way to show two images using this?

First, to add second image, you need to use :before

[data-section-id="6566207a3608ec2faeee84dc"] .slideshow-wrapper:before

Next, I think you need to use: top: 0; for second image

If you can't make it work, you can share page url, we can help easier.

Or another way, you can add a section with 2 images under slideshow, then we can use CSS code to move whole section over Slideshow section

Hello @tuanphan I've followed along with your tips in this thread, which are super helpful; but am having difficulty adding a h ref to the image - could you offer any assistance? 

Thank you in advance! 

site is: www.thatsheila.com

password: merlx2

On 8/15/2024 at 5:23 PM, belbelbelbel said:

Hello @tuanphan I've followed along with your tips in this thread, which are super helpful; but am having difficulty adding a h ref to the image - could you offer any assistance? 

Thank you in advance! 

 

 

site is: www.thatsheila.com

password: merlx2

Do you use Personal or Business Plan? If Business/higher, let me know, I will adjust the code

If Personal Plan, I think you can add a section under Gallery Slideshow >> Add an Image Block with Link. I will give code to move this section over Slideshow section.

What do you think?

Hello @tuanphan the site is using a Business Plan

Thank you 

On 8/18/2024 at 2:42 PM, belbelbelbel said:

Hello @tuanphan the site is using a Business Plan

Thank you 

Remove code I sent & use this new code. Replace amazon with desired url

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('<a href="https://amazon.com" target="_blank" class="custom-img"><img src="https://static1.squarespace.com/static/665a652de576867a26021080/t/66694e042671fd57abfd39bd/1718177284242/sheila+02.png"/>').appendTo('section[data-section-id="668ce9ead5f66752bfbf53cb"] .gallery-fullscreen-slideshow-list');
  });
</script>
<style>
div.gallery-fullscreen-slideshow-list .custom-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 999999;
    text-align: center;
}
div.gallery-fullscreen-slideshow-list .custom-img img {
    width: 150px;
}
</style>

Great - thank you @tuanphan works perfectly. 

One further update request; how would I amend the code injection so that the link opens in the same window (not in a new browser tab?)

Thank you!

On 8/24/2024 at 5:21 PM, belbelbelbel said:

Great - thank you @tuanphan works perfectly. 

One further update request; how would I amend the code injection so that the link opens in the same window (not in a new browser tab?)

Thank you!

Change this

target="_blank"

to this

target="_self"

Thank you so much! 

Hello, I'm having a hard time getting my gif to overlay on my carousel images. I attempted to use the code you provided with my section id and gif URL but something's not adding up. Can you please help?

On 9/19/2024 at 1:48 AM, KPoggi22 said:

Hello, I'm having a hard time getting my gif to overlay on my carousel images. I attempted to use the code you provided with my section id and gif URL but something's not adding up. Can you please help?

The code for Gallery Slideshow. But if you use List (People) Carousel, it will need a different code. Can you share link to page where you use carousel?