JGL

Hey @Beyondspace and thanks. URL is still in development, but here is link I can currently get: https://triceratops-teal-ybs4.squarespace.com/work-1 Essentially I want a hover caption with a semi-opaque background and black text. I've attached images of the two versions of hover/caption I currently have on my site – one is for grid-simple and one is for grid-strip. But I'd like a similar caption behavior and appearance for slideshows/reels especially. I am having the two different gallery types get a hover caption right now by using Custom CSS for the grid-strip and a code injection for the grid-simple. This doesn't seem very elegant...I just don't know how to get all gallery types to have same caption/hover appearance and behavior. Here is the CSS for strips that I'm using: .gallery-caption { position: absolute; top: 0; left: 0; /* You can replace the color here with a different color */ background-color: rgba(255,255,255,0.7); 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: #000000; /* You can change the color of your image caption here */ font-size: 22px !important; font-weight: 400; } .gallery-caption-strips { transition-delay: 0ms; } .gallery-caption { pointer-events: none; } .gallery-strips-item { position: relative; } .gallery-strips-item:hover .gallery-caption { opacity: 1; } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } ////////////////////////////////////////// And here is the code injection I'm using for the grid-simple: <style> .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: black; /*caption font color */ text-align: center; /*padding: 16px;*/ max-width: 85%; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } .gallery-grid-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } </style> ////////////////////////////////////////////////////////////

I'm working on an as-yet unpublished 7.1 site for an artist and I'd like for all gallery types to have a caption that hovers. So far I've found code for grid-simple, masonry, strips, and reel.... but each of them breaks the caption functionality for another type. I'd like to find a code that hovers captions for all gallery types, as this site needs to employ several gallery types. Thanks!