Jump to content

Overlay an image on top of a slideshow

Go to solution Solved by jpeter,

Recommended Posts

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!

Link to comment
  • Solution

@sprucerow You can use the following CSS below. You'll need to update the URL of the background-image property to a transparent version of the brushstroke and then play around with the height property as well. 

CSS

[data-section-id="6566207a3608ec2faeee84dc"] .slideshow-wrapper:after {
  background-image: url('https://www.onlygfx.com/wp-content/uploads/2019/03/14-white-grunge-brush-stroke-6.png');
  height: 60px;
  content: '';
  width: 100%;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 10;
  background-size: cover;
  position: absolute;
  background-repeat: repeat-x;
  background-position-y: top;
}

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.