How do I get caption text below an image to be over the image in gallery:slideshow simple?

Margaret55 · May 11, 2022

Site URL: https://kistcreekcattle.squarespace.com

Hi,

I am trying to write css to put the slideshow caption over a slide image. I have been able to access the slide item in the slideshow and color the background of the caption text but I don't know how to put the caption text over the slideshow image. Can you help? Here is my css code:

.gallery-slideshow-item-wrapper{opacity:0.4;}

.gallery-caption-slideshow
{background-color:rgba(0, 0, 0, 0.2)}

Attached is a image of what I am trying to achieve. The sitewide password to my site is :#Cattle. The slideshow I am playing with is the first slideshow under Horses For Sale. The second slideshow is what I am trying to do using an inline image that has this functionality in squarespace 7.1.

Thanks so much,

Margaret

creedon · May 11, 2022

Replace your .gallery-caption-slideshow ruleset with the following.

.gallery-caption-slideshow {

  background-color : rgba( 0, 0, 0, 0.8 );
  height : auto;
  margin-top : 0;
  padding : 0.5em;
  position : absolute;
  top : 50%;
  transform : translateY( -50% );
  
  }

This is for v7.1 and specific to the posters need.

Let us know how it goes.

Margaret55 · May 12, 2022

Perfect! You are the best! I can tweak it from here.

How do I get caption text below an image to be over the image in gallery:slideshow simple?

Recommended Posts

Margaret55

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Margaret55

Posted Images

creedon

Link to comment

Margaret55

Link to comment

Create an account or sign in to comment

News

Margaret55

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources