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}