bellamalia reacted to
Beyondspace in Reveal text with hover on gallery
We can achieve this layout by using the image section (Simple style)
Note: Set Captions on
After that, we can use the CSS code:
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-grid-lightbox-link {
background: #000;
}
.gallery-grid-item:hover .gallery-grid-lightbox-link img {
opacity: 0.6;
}
.gallery-caption.gallery-caption-grid-simple {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
}
.gallery-grid-item:hover .gallery-caption-grid-simple {
opacity: 1;
transition: none;
}
.gallery-caption-content {
text-align: center;
color: #fff;
}
My testing
Let me know how it works
