Hello @tuanphan
I am using gallery strips format. I successfully got the captions to show up over the image when hovering, but I haven't successfully achieved the following:
1) removing the extra white space from the hidden caption
2) having a caption show up in Lightbox underneath the image
What code do I need to add? Thank you!
---
Code I am using is below:
figure.gallery-strips-item {
position: relative;
}
.gallery-caption {
position: static;
}
/* title */
.gallery-caption-content {
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;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
background: rgba(255,255,255,0.90);
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
opacity: 0.85;
}
.gallery-caption p {white-space:pre; text-align:center}