Jump to content

Full Height Caption Overlay on Image

Recommended Posts

12 hours ago, Smoore1271 said:

Site URL: http://wrasse-purple-8tlh.squarespace.com

Hi,

I am trying to get the hover color on my captions to be the full height of the image. I tried editing the height to 100%, but I can't get it to work! 

Do you mean that the overlay text will spread full of image-item when visitors hover it? 

image.png

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
On 10/10/2021 at 10:57 PM, Smoore1271 said:

Yes so the black background would overlay on the entire image and the text would be centered within the image block.

Try adding to Design > Custom CSS

body.homepage figcaption.image-caption-wrapper {
    max-height: 100% !important;
    top: 0 !important;
    justify-content: center;
    align-items: center;
    display: flex;
}
body.homepage figcaption.image-caption-wrapper p {margin:0;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

If you want to enable link click on each item, you can try this:

.image-block-outer-wrapper .sqs-block-image-figure > a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: none;
}

.image-block-outer-wrapper:hover.image-block-outer-wrapper
  .sqs-block-image-figure
  > a::before {
  display: block;
}
.image-block-outer-wrapper .image-caption-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
}
.image-block-outer-wrapper .image-caption-wrapper h4 {
  color: #eee;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0;
  transform: translate(-50%, -50%);
  width: 100%;
}
.image-block-outer-wrapper .image-caption-wrapper,
.image-block-outer-wrapper .image-caption {
  position: static !important;
  padding: 0 !important;
}

My snippet is longer but may help you enable link click

Edited by bangank36

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
3 hours ago, Smoore1271 said:

That was my next question, thank you! Is it possible to make it so the text is clickable as well on the hover? It would be the same link but I could see users trying to click the text.

The caption is outside of the image-link wrapper so it can't be like what you asked with css

image.thumb.png.7dc81c067b3a5d64ed75a9eb1c8d3053.png

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.