Jump to content

How to code captions to overlay photos in gallery

Recommended Posts

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>

image.thumb.png.6313e2d9e33a0e6f1fbef76a1af58576.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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? 

Screen Shot 2021-12-29 at 10.46.22 AM.png

IMG_7770.PNG

IMG_7769.PNG

Link to comment

#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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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>

Screen Shot 2022-01-01 at 2.44.20 PM.png

Link to comment

@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?

 

Screen Shot 2022-01-01 at 3.03.03 PM.png

Screen Shot 2022-01-01 at 3.03.10 PM.png

Screen Shot 2022-01-01 at 3.05.18 PM.png

Link to comment
  • 1 month later...
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
42 minutes ago, ThisWayToFabulous said:

Is it the result you want to achieve?

image.thumb.png.a3ffe6a032b8eb99262992af4572cece.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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>

 

Link to comment
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?

image.thumb.png.95660e1c9264e231b6bbc812ef6faf45.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
10 hours ago, bangank36 said:

How do you think about this result?

image.thumb.png.95660e1c9264e231b6bbc812ef6faf45.png

 

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

image.png.50dfe4e69d33d44081148b7eca823633.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 month later...
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? 

Ethnic Weddings — Tamara Makeup and Hair Artistry.jpeg

Ethnic Weddings — Tamara Makeup and Hair Artistry.jpeg

IMG_9462.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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?

Link to comment

You can get reference from the following post: 

Hope it can help

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.