Jump to content

Padding for caption on hover

Recommended Posts

Site URL: https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch

Hello!

I have used some code to create a caption on hover in a simple grid gallery. It works fine, but the I would like to increase the padding around the text. https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch  password: Magnolia.

Here is the code I used:

/* Image Captions on Hover*/
.layout-caption-overlay-hover .image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 108, 0, .8) !important; /* Background Overlay*/
}

.layout-caption-overlay-hover .image-caption-wrapper p1 {
  color: White !important; /* font color of caption */
}

Screen Shot 2021-09-30 at 9.22.11 AM.png

Edited by momallo
didn't finish before I posted!
Link to comment
14 hours ago, momallo said:

Site URL: https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch

Hello!

I have used some code to create a caption on hover in a simple grid gallery. It works fine, but the I would like to increase the padding around the text. https://tomato-hibiscus-5kcf.squarespace.com/fleet-finch  password: Magnolia.

Here is the code I used:

/* Image Captions on Hover*/
.layout-caption-overlay-hover .image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  background: rgba(255, 108, 0, .8) !important; /* Background Overlay*/
}

.layout-caption-overlay-hover .image-caption-wrapper p1 {
  color: White !important; /* font color of caption */
}

Screen Shot 2021-09-30 at 9.22.11 AM.png

image.thumb.png.7fb7d7bb793237bda713adaa43639f80.pngmaybe try

.gallery-caption-wrapper {
    padding: 15px 15px;
    box-sizing: border-box;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.