How to code captions to overlay photos in gallery

Site URL: https://tmha-new-site.squarespace.com/portfolio/bride

password: tamara

I'm trying to code this so that the photographer info shows up nice and small just on a hover. Does that make sense?

@tuanphan @creedon moreover, im trying to figure out how to properly credit on mobile since there is no hover. perhaps just tiny text over the bottom area of the image?

Add a Code Block under Bridge Text Block >> Paste this code

<style>
  @media screen and (min-width:992px) {
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
  }
</style>

@tuanphan thanks so much for this start!

My client likes the way their old site looked where it was much more subtle. Is there a way to mock this? It looks like only the bottom 1/4 of the image has a black gradient transparent overlay when hovered.

Then for mobile, can we make it so captions don't show under the thumbnails, but only show under the image when clicked? 

#1. Edit this code

.gallery-grid-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

to this

.gallery-grid-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    height: 30%;
}

(I removed top: 0; and add height: 30%)

#2. Can you share link to old site?

@tuanphan here is the link to her other website to show you.

https://www.tamaramakeup.com/weddings-1

I stole some code from her old site and i have the gradient hover looking good BUT if possible, I'd like that area at the bottom to hover WHITE instead of BLACK (since the text is black, Id like to pop that with white gradient.

<style>
  @media screen and (min-width:992px) {
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 12;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 100%);
        mix-blend-mode: multiply;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 100ms !important;
    height: 20%;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.5;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
  }
</style>

@tuanphan Ok i've got it setup to the black transparent gradient and ive made the caption white... (I would still love to know how to flip this to white gradient if possible, Ive tried other color code to no avail)

My second question here tho is how to resize the caption, as you can see smaller screens make it push to 2 lines. I was trying to force it small but its not taking?

@tuanphan or @bangank36 could you help me figure out how to make the overlay white with black text instead?

8 hours ago, ThisWayToFabulous said:

@tuanphan or @bangank36 could you help me figure out how to make the overlay white with black text instead?

Can you share the direct link to the page you want to apply this effect?

@bangank36 https://tmha-new-site.squarespace.com/galleries/ethnic-weddings (password:tamara)

42 minutes ago, ThisWayToFabulous said:

@bangank36 https://tmha-new-site.squarespace.com/galleries/ethnic-weddings (password:tamara)

Is it the result you want to achieve?

Try adding to Home > design > Custom Css

@media screen and (min-width: 992px) {
  .gallery-grid-item-wrapper a:after{
    background: rgba(255,255,255,0.9);
    height: 100%;
      mix-blend-mode: unset;
  }
  .gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    color: black;
  }
}

Let me know how it works on your site

@bangank36 no, I want to keep the gradient as it is. I just want it to lighten instead of darken. Does that make sense? 

This is what code block is under Bride (from @tuanphan)

<style>
  @media screen and (min-width:992px) {
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
  color: #ffffff;
  font-size: 6pt !important;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 15;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 4%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.95) 100%);
        mix-blend-mode: multiply;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 1s !important;
    height: 25%;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
  }
</style>

34 minutes ago, ThisWayToFabulous said:

This is what code block is under Bride (from @tuanphan)

 

<style>
  @media screen and (min-width:992px) {
  figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
  color: #ffffff;
  font-size: 6pt !important;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 15;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 4%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.95) 100%);
        mix-blend-mode: multiply;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 1s !important;
    height: 25%;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
  }
</style>

 

How do you think about this result?

10 hours ago, bangank36 said:

How do you think about this result?

 

1. For the overlay color, your can change from

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.95) 100%);
mix-blend-mode: multiply;
height: 25%;

to

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 100%);
height: 50%;

(remove the mix-blend-mode)

2. color of title: change the color code in this code

@bangank36 thanks so much for this. I showed it to my client and she actually preferred the darker version with the white text. I can never win! haha

THANK YOU!

@tuanphan / @bangank36

My client switched the gallery style to Masonry and now this hover effect isn't working any more!! Can it work in this style gallery or only the other style? AGH i didnt think twice about changing the style.

https://tmha-new-site.squarespace.com/galleries/ethnic-weddings

password: tamara

@tuanphan @bangank36

Ok i figured out the hover for desktop, but is there now a way for those photographer credits under the photo to go away in the grid view but show up when the image is clicked to be bigger (lightbox)? Ideally the same gradient look like the desktop hover, but only show up when its clicked on on the mobile site. Does that make sense? 

9 hours ago, ThisWayToFabulous said:

@tuanphan @bangank36

Ok i figured out the hover for desktop, but is there now a way for those photographer credits under the photo to go away in the grid view but show up when the image is clicked to be bigger (lightbox)? Ideally the same gradient look like the desktop hover, but only show up when its clicked on on the mobile site. Does that make sense? 

Do you still need help? What is your issues at the moment?

@bangank36 yes my issue is what i wrote above. The mobile issues.

is there now a way for those photographer credits (captions) under the photo to go away in the grid view but show up when the image is clicked to be bigger (lightbox)? Ideally the same gradient look like the desktop hover, but only show up when its clicked on on the mobile site. 

So captions not show when you first get to page...when you click a photo to see it larger, it shows up with the gradient+caption.

Does that make sense?

You can get reference from the following post: 

Hope it can help

@bangank36 unfortunately no this is not helpful for me, i have no idea how to apply that here.

Can i simply just "hide" the descriptions on mobile? OR. Overlay it on the image even? It looks awful like this.

For hiding the caption on mobile, you can use the following one

@media only screen and (max-width: 767px) {
  section[data-section-id="61a7c0bbf7486f7637972ffd"] .gallery-caption-grid-masonry {
    display: none;
  }
}

Let me know how it goes