Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Padding for caption on hover


momallo

Question

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

1 answer to this question

Recommended Posts

  • 0
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 BaNgan from 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, Youtube Gallery for Squarespace
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...