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

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

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

Here is a variation on my previous code for Slideshow : Full.

.gallery-caption-fullscreen-slideshow {

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

This is for v7.1.

I want it to look like this - but in the middle and also use the h2 font that I have added

On 7/22/2024 at 2:49 AM, ShreyaK said:

I want it to look like this - but in the middle and also use the h2 font that I have added

The site is expired. You can check again then we can test code easier

https://keyboard-platinum-k3wn.squarespace.com/

pass:hc123

On 7/26/2024 at 3:38 AM, ShreyaK said:

https://keyboard-platinum-k3wn.squarespace.com/

pass:hc123

I see you figured it out?

no the font is still not h2, its not letting me set it to h2, also want to make the box bigger to match this 

On 7/30/2024 at 5:10 AM, ShreyaK said:

no the font is still not h2, its not letting me set it to h2, also want to make the box bigger to match this 

You can use this to Website Tools > Custom CSS
 

body.homepage .gallery-section .gallery-fullscreen-slideshow .gallery-caption p {
    font-size: 40px !important;
    line-height: 36px;
    font-family: freight-display-pro;
    font-weight: 400;
}