Caption overlay on top of images?

Site URL: https://fish-mayflower-586h.squarespace.com

Hi,

I am trying to add some caption overlays to the images in a masonry gallery as currently displayed on my home page.

I don't want the captions to appear underneath each image, but rather on top inside the image container div, like at the bottom right for example. I attached a reference on what I am envisioning.

Or is there an option to just have them appear on top each image on hover over?

 Is there a way to accomplish this?

Even if the solution is to add some custom CSS to the site. I am not sure what ID to target the masonry  grid to display this properly...

Any advice much appreciated.

Thank you! 

Can you provide password?

Hi there,

The Password is: testing

Page: https://fish-mayflower-586h.squarespace.com/general-2
 

Two questions:

1.
I am using the following CSS but for some reason when I change the column number, which affects the column width, the black overlay doesn't cover the full width of the image tile. Any idea what the issue could be?

2. How can I increase the font size of the caption in the Editor or in the custom CSS? The caption font size rule in the CSS gets ignored, unless I am not targeting the captions correctly?

Thank you!
 

/* General 2| Caption Overlay */
.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s; /* transition duration */
}

.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}

.gallery-caption-grid-masonry .gallery-caption-content {
  font-size: 1rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
  text-align: center; // center text within caption box
}

.gallery-grid-item {
  position: relative;
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

.gallery-caption-grid-masonry {
    transition-delay: 100ms;
    max-width: unset;
}

Thank you!

Hi @tuanphan,

Now that I have the overlay working on the masonry grid, I would also like to apply it to the Image Carousel in the section below the masonry grid, but am not sure what elements to target and how to make the image clickable instead of the button.

Essentially I would like:
1. The slide title and description to act like the captions do on the masonry grid overlay (appear on hover only)

2. Hide the button and make the image click through to the target URL (instead of the button that will be hidden)

Thanks so much!


Ref: https://fish-mayflower-586h.squarespace.com/

PW: testing

 

15 hours ago, Dada78 said:

Hi @tuanphan,

Now that I have the overlay working on the masonry grid, I would also like to apply it to the Image Carousel in the section below the masonry grid, but am not sure what elements to target and how to make the image clickable instead of the button.

Essentially I would like:
1. The slide title and description to act like the captions do on the masonry grid overlay (appear on hover only)

2. Hide the button and make the image click through to the target URL (instead of the button that will be hidden)

Thanks so much!


Ref: https://fish-mayflower-586h.squarespace.com/

PW: testing

 

#1. Use this code to Website Tools > Custom CSS

section[data-section-id="66ee322f1bb4ac1794a2c10a"] {
  li.user-items-list-carousel__slide.list-item {
      pointer-events: initial !important;
      position: relative;
  }
  /* image */
  li.list-item img {
      filter: grayscale(1);
      transition: all 0.5s ease;
  }
  li.list-item:hover img {
      filter: grayscale(0);
      transform: scale(1.1);
      transition: all 0.5s ease;
  }
  .list-item-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 100%;
      opacity: 0;
      transition: all 0.5s ease;
  }
	/* text color */
  .list-item-content * {
      text-align: center !important;
      color: #fff !important;
  }
  li.list-item:hover .list-item-content {
      opacity: 1;
      transition: all 0.5s ease; 
  }
}

#2. You mean make whole item (image, text, button) clickable to same link?

Thanks, yes, the entire tile should just click out to the designated link. Will the above solution allow the slide item to be clickable? Thanks!

5 hours ago, Dada78 said:

Thanks, yes, the entire tile should just click out to the designated link. Will the above solution allow the slide item to be clickable? Thanks!

 

Can you add a hyperlink to Description. I intend to use code to make this link cover whole item, so whole item will be clickable

Thank you, I will report back once implemented!