caption hover for all 7.1 gallery types

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!

19 hours ago, JGL said:

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!

Can you share your URL so I can take a look? How do you want all type of gallery caption to be set style? 

It could be better if you can share some samples

7 hours ago, Beyondspace said:

Can you share your URL so I can take a look? How do you want all type of gallery caption to be set style? 

It could be better if you can share some samples

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>

////////////////////////////////////////////////////////////