Jump to content

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

By Margaret55, in Customize with code

Go to solution Solved by creedon,

Recommended Posts

Margaret55 Level 4

Margaret55

Posted
Posted

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

text-overlay-example.jpg

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Margaret55
Margaret55

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

Margaret55
Margaret55

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 co

creedon
creedon

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;  

Posted Images

  • Solution
creedon Level 15

creedon

Posted
  • Solution
Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources