Jump to content

Change image hover state

Recommended Posts

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

Link to comment
  • Replies 10
  • Views 771
  • Created
  • Last Reply
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.