Is there any way to change this to work for Gallery sections?
This is the current code I have, I am new to this and tried applying the code previously given in the forum to the gallery blocks but couldn't figure it out.
Website is http://abouhashish.co
.gallery-grid .gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
height: 100%;
padding: 0;
opacity: 0;
}
.gallery-grid .gallery-caption-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.gallery-grid .gallery-caption-content {
font-size: 7rem !important;
color: white;
padding: 1vw;
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1; transition: 0.1s
}
.gallery-caption-grid-masonry {
max-width: unset;
}
@media only screen and (max-width: 640px) {
.gallery-grid .gallery-caption-content:not(.grid-gallery-v2).layout-caption-overlay-hover gallery-caption-content {
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
}
}