Older isotope portfolio rows shifting downward by 1 pixel on hover

It’s the border at the bottom of #portfolio-items article when you hover.

There actually doesn’t appear to be a border at the bottom of the article element, the gray border you see is at the bottom of the the link using#portfolio-items article .project-meta at the bottom of the portfolio item.

So you have two options, re-write the CSS section for hover to change the gray to green, by adding a rule like this:

#portfolio-items article:hover .project-meta {
     border-bottom: 1px solid #33be25;
}

And then remove the border from this rule:

#main-nav a:hover,
#main-nav .hover>a,
#main-nav .current_page_item>a,
#main-nav .current_page_parent>a,
#main-nav .current-menu-item>a,
.projects-carousel a:hover,
#portfolio-items>article:hover,
.team-member:hover {
         border-bottom: 1px solid #33be25;
}

But that will effect all the other items so maybe just add this rule:

#portfolio-items>article:hover {
     border-bottom:none;
}

I think what would be more effective though would just be to update this rule:

#portfolio-items article {
     margin-bottom: 50px;
     border-bottom: 1px solid transparent; /* add this line */
}

So what you’re basically doing is including the logo already, so that when the items load they have their set size… …then when you hover all you’re doing is changing the colour from transparent to green.

Related Posts: