Can someone help? I want some text headings to sit over the images in a gallery on 7.1. I have this code below but I DON'T want it to hover, just be there all the time. I've experimented to try and remove the hover myself but I just keep breaking it. I've put this in the code injection on the page with the gallery, and it looks perfect... but only on hover!
<style>
.gallery-caption {
position: absolute;
top: 0;
left: 0;
/* You can replace the color here with a different color */
background-color: rgba(0,0,0,0);
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
-webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
-moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
-o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
-ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1);
}
.gallery-caption-content {
/* You can change the color of your image caption here */
color: #FFFFFF;
font-size: 40px !important;
font-weight: 500 !important;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption {
pointer-events: none;
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
</style>
