Hi everyone. I am re-building my site to update to 7.1 and I am trying to add hover over text on top of my photos in a simple grid layout.
Below is my code trying to achieve the effect.
// Gallery Image Hover //
/* Caption Details */
.gallery-caption {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 102%;
text-align:center;
opacity: 0;
transition: all .3s ease;
background-color: white;
height: 100%;
}
/* Simple Grid Hover Over */
.gallery-grid-item:hover .gallery-caption {
opacity: .5;
transition: all .3s ease;
}
/* Caption Placment */
.gallery-caption-wrapper {
display: flex;
place-items: center;
justify-content: center;
}
Any idea on why it's not working? The weird thing is if I update the ".gallery-grid-item: hover" to ".gallery-masonry-item: hover" it works for masonry galleries but I can't get it to work for simple galleries.
drwhittelsey got a reaction from digitalfreelancer in Banner videos not displaying on mobile
drwhittelsey got a reaction from Beyondspace in Create a Hover-Over
