Change image hover state

Hi there,

I'm building a portfolio site for a client using the Miller template (still unpublished). On one page, I have a bunch of image blocks (NOT a gallery). Is there any way to change the hover effect on just this one page? On the hover, I'd like each image block to have a full color overlay with the caption text in the middle, poster style. 

Thanks!
Sarah

Yes. You can. Can you share link to that page? We can check easier.

if your site is trial, you can setup password & share url.

@tuanphan

Thanks! The page I'm looking to add this feature to is molly-test.squarespace.com/work and the password is Portfolio5.

On 9/23/2020 at 3:29 AM, sarahrab said:

@tuanphan

Thanks! The page I'm looking to add this feature to is molly-test.squarespace.com/work and the password is Portfolio5.

Can you add some demo caption? We can test code easier.

@tuanphan I just added some demo captions! The site can now be reached at http://www.mollydressel.com/ with the same Password.

Thank you!

On 9/25/2020 at 7:42 AM, sarahrab said:

@tuanphan I just added some demo captions! The site can now be reached at http://www.mollydressel.com/ with the same Password.

 

Thank you!

Password

Password.

Incorrect password

@tuanphan the password is Portfolio5.

Portfolio5.

Incorrect password

Add to Page Settings > Advanced > Header

(if you use Personal Plan > Edit Page > Add Code Block)

<style>
  figcaption.image-caption-wrapper {
    max-height: unset !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

@tuanphan Thank you, that worked, but now my clickthrough links don't work. Is there any way for me to add the links back in to the images and keep the hover? And how can I style the caption text?

I don't know why the password didn't work. I just made the site public: http://www.mollydressel.com/work

@tuanphan thanks!