Gallery Image Borders Not Flush Due to Captions Setting

Hello, 

I'm adding CSS to my portfolio gallery images and cannot figure out how to flush the borders at the bottom. I have already used code to make the captions only visible when hovering over the images (code used below). Due to this, the image borders have padding at the bottom, normally where the captions would be. Is there any code that would force the bottom borders flush to the images regardless of the captions setting, that can also change color upon hovering the image? The captions are necessary because it's an artist's portfolio, but the hover effect was cleaner than below them. I attempted using padding set to 0 for the border code, however, I removed it because it wasn't working. Coding and images are attached below.

Thank you!

Code used for captions only on hover:
//GALLERY STRIP HOVER EFFECT//
figure.gallery-strips-item {position:relative;}
.gallery-caption {
    position: static;}
/* title */
.gallery-caption-content {
      color:white;
      font-weight:bold!important;
      position:absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding:20%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;}
.gallery-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;}

Code attempt for image border:
//Gallery image borders/
.gallery-strips-item {border: solid 2px black;!important}

Hey Chewy, can you share your website address? You'll probably need to target the img element directly but can check on your site

Hi Cass, 

I'm using borders across all portfolio images from the folder dropdown (there are 7 image galleries total). It's not a published site yet, so not sure how the password option works, but set it up as below.

site: chiton-scarlet-xsch.squarespace.com

password: artportfolio1234

Thanks!

That was it Cass, works perfectly! Thank you!