How to achieve custom colour overlay on inline images

How can I edit my code so that in the attached screenshot:

The colour overlay (on hover) covers the image perfectly

The overlay text sits middle centre 

Many thanks

Tara 

Can you share your website URL and generally expand on details including the code you've used? Thanks!

This is the code I've used to get it to what you see in the screenshot:

.sqs-block.image-block {
 padding: 0;
 margin: 10px;

}

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
  background: #515b64;
  opacity: 80%;
    width: 100%;
  height: 100%;
}

Website link here: 

https://elk-tuna-ztlx.squarespace.com/

Password: hello

Add this to your CSS:

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
    max-height: 100%;
}

So that has kind of worked but now its sitting above and below the image by too much (see attached screenshot). Is there a fix for this?

Not sure why that's happened, but when looking at your website I can only see the default small caption overlay now, did you remove the CSS?

I didn't remove it no - it just suddenly stopped working. 

2 hours ago, Red_Dot_Design said:

I didn't remove it no - it just suddenly stopped working. 

Did you do anything beyond adding the CSS I gave you?

I've removed everything and re-added the code and it's working again! 

The only question left is how do I center the overlay text within the box and style it?

Thank you. 

Try adding this too:

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption {
  margin-top: auto;
  margin-bottom: auto;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
    display: flex;
    align-content: center;
}

Thank you, that's much closer but it's still sitting to the left (see screenshot) is there a way to centre it completely? 

That's done it! Thank you. 

Hi Ziggy,

I've moved this onto a new site and I am having a few problems. Firstly, I've added the exact code in the solution above but what happens is as per the attached screenshot titled "Overlay example". 

Would you be able to have a look and let me know how to adjust the code so the overlay colour covers the photo completely and the text is completely centre aligned? 

My new site is at:

https://gopher-tomato-twpa.squarespace.com/

Password: hello

Thanks,

Tara

Hi Tara, it looks like you need an !important after the 80% opacity and add this:

.image-caption-wrapper {
    max-height: 100% !important;
}

Thank you! 😊  That helped fixed the colour overlay but the text is still sitting at the bottom instead of in the middle of the box? 

Add this too:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover:hover .image-caption-wrapper .image-caption {
  margin-bottom:auto !important;
}

Thanks! That's it all fixed aesthetically but now when I try to click on each box it no longer takes me to the linked page. If I remove the code the links seem to work fine. 

Yes, it looks like the image is the only clickable element, the caption is not clickable, so when you cover the entire image, there's nothing left to click on! How frustrating!

Ok, thanks for all your help anyway. If you can think of another way of setting it up where the link would still work, let me know.