Jump to content

Adding link to hover overlay + centering text/adjusting padding

Recommended Posts

Site URL: https://www.opalivory.com/

Hello! 

I have four in-line photos on the portfolio preview section of my website. I currently have them formatted to have a small square overlay appear centered over the photo when it's hovered over using Caption on Hover. 

I'm struggling with how to, first and foremost, get the text centered in the middle of the box. I'm not how sure how to describe it in the context of coding but if I were editing on illustrator, I would be adjusting the paragraph alignment. 

Secondly, I have links attached to each photo to take the user to the full portfolio link, however they're not actively clickable.

opalivory.com

website PW: Design2022

Any help would be greatly appreciated!!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi there,

 

There are some default margins and spacing applied to these blocks but these CSS rules should help get you in the right direction.

You can remove the media-query and set this behavior as the default as well.

.image-caption-wrapper:hover {
  display: flex !important;
  height: auto;
  justify-content: center;
}
@media screen and (min-width: 1025px) {
  .image-caption-wrapper {
    display: flex;
    justify-content: center;
    height: auto;
  }
}

 

Edited by Wolfsilon
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.