Jump to content

hover state mismatched alignment - Flatiron Template

Recommended Posts

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

Hi forum,

I'm using the custom CSS below to add space between my images on my Index Page gallery using the Flatiron template. It works as I want it to but I want the Hover State dark grey box to match the border on all four sides - right now the right side is much thinner than the others. I added screenshots for visualization - Any ideas on how to fix?

/* Flatiron: Add 8px white space between index items */
/* set the white space on each side of page */
#container-content {
   padding-left: 8px!important;
   padding-right: 8px!important;
}
#grid .item {
 margin-left:-8px;
 a {
   border: 16px solid #fff;
   }
 /* Overlay size on hover */
 .wrapper {
   margin: 16px;
 }
}
#grid .item {
    padding: 20px !important;
    box-sizing: border-box;
}

 

 

 

Screen Shot 2022-09-05 at 5.22.37 PM.png

Screen Shot 2022-09-05 at 5.22.46 PM.png

Screen Shot 2022-09-05 at 5.22.37 PM.png

Screen Shot 2022-09-05 at 5.22.46 PM.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I think this is not possible. You can consider some other effect, eg: change image opacity on hover, invert image color,...

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.