Full Height Caption Overlay on Image

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! 

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? 

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

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;}

That worked thank you so much!!

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

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.

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