Create a Hover-Over

Hi everyone. I am re-building my site to update to 7.1 and I am trying to add hover over text on top of my photos in a simple grid layout.

Below is my code trying to achieve the effect.

// Gallery Image Hover //

/* Caption Details */
.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

/* Simple Grid Hover Over */
.gallery-grid-item:hover .gallery-caption {
    opacity: .5;
    transition: all .3s ease;
}

/* Caption Placment */
.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

Any idea on why it's not working? The weird thing is if I update the ".gallery-grid-item: hover" to ".gallery-masonry-item: hover" it works for masonry galleries but I can't get it to work for simple galleries. 

Can you share a link to the demo site you're currently working with?

Hi Nick,

The website is still under construction and not live. Is there a way to share a page link without posting the website live?

12 hours ago, drwhittelsey said:

Hi Nick,

The website is still under construction and not live. Is there a way to share a page link without posting the website live?

You can setup password & share url

15 hours ago, drwhittelsey said:

Hi everyone. I am re-building my site to update to 7.1 and I am trying to add hover over text on top of my photos in a simple grid layout.

Below is my code trying to achieve the effect.

// Gallery Image Hover //

/* Caption Details */
.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

/* Simple Grid Hover Over */
.gallery-grid-item:hover .gallery-caption {
    opacity: .5;
    transition: all .3s ease;
}

/* Caption Placment */
.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

Any idea on why it's not working? The weird thing is if I update the ".gallery-grid-item: hover" to ".gallery-masonry-item: hover" it works for masonry galleries but I can't get it to work for simple galleries. 

Try this approach if it helps

https://beyondspace-showcase.squarespace.com/gallery-hovers/?password=1234

Hey @tuanphan and @NickScola

The website is https://dodecahedron-coral-95nw.squarespace.com/

The password is Hoverhelp

Would really appreciate either of you looking into my code to see what's up. I'm totally stumped 😞

6 hours ago, drwhittelsey said:

Hey @tuanphan and @NickScola

The website is https://dodecahedron-coral-95nw.squarespace.com/

The password is Hoverhelp

Would really appreciate either of you looking into my code to see what's up. I'm totally stumped 😞

Sorry for the delay, try this: 

.gallery-grid--layout-grid .gallery-grid-item {
  position: relative;
  overflow: hidden;
  
  &:hover {
    
    .gallery-caption {
      opacity: 1;
    }
    
    .gallery-caption .gallery-caption-wrapper {
      transform: translateY(0);
    }
    
  }
  
  .gallery-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
    
    .gallery-caption-wrapper {
      height: auto;
      padding: 0 20px;
      text-align: center;
      transform: translateY(25vh);
      transition: transform ease-in-out 0.5s;
  	}
    
  }
   
}

Hey @Nick Scola,

Sorry for the delayed response, I've been out of town but your code worked beautifully. I edited it a bit to get the desired UI but it's working great!

Is there a way to implement this same code style on a masonry gallery as well? My old masonry gallery hover over code doesn't work with adding this new code.

On 8/2/2021 at 11:33 AM, drwhittelsey said:

Hey @Nick Scola,

Sorry for the delayed response, I've been out of town but your code worked beautifully. I edited it a bit to get the desired UI but it's working great!

Is there a way to implement this same code style on a masonry gallery as well? My old masonry gallery hover over code doesn't work with adding this new code.

Try change the word "grid" in above code to "masonry"

6 hours ago, tuanphan said:

Try change the word "grid" in above code to "masonry"

I tried that but still not getting a hover over. Below is my code and my website link is https://dodecahedron-coral-95nw.squarespace.com/

@tuanphan if you see something wrong with what I'm doing, let me know 🙂

// Masonry Hover Over Animation //
.gallery-masonry--layout-masonry .gallery-masonry-item {
  position: relative;
  overflow: hidden;
  &:hover {
    .gallery-caption {
      opacity: 1;
    }
    .gallery-caption .gallery-caption-wrapper {
      transform: translateY(0);
    }
  }
  .gallery-caption {
    position: absolute;
    top: 20;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
    .gallery-caption-wrapper {
      height: auto;
      padding: 14px 20px;
      text-align: center;
      transform: translateY(10vh);
      transition: transform ease-in-out 0.25s;
  	}
  }
}

18 hours ago, drwhittelsey said:

I tried that but still not getting a hover over. Below is my code and my website link is https://dodecahedron-coral-95nw.squarespace.com/

@tuanphan if you see something wrong with what I'm doing, let me know 🙂

 

// Masonry Hover Over Animation //
.gallery-masonry--layout-masonry .gallery-masonry-item {
  position: relative;
  overflow: hidden;
  &:hover {
    .gallery-caption {
      opacity: 1;
    }
    .gallery-caption .gallery-caption-wrapper {
      transform: translateY(0);
    }
  }
  .gallery-caption {
    position: absolute;
    top: 20;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity ease-in-out 0.25s;
    .gallery-caption-wrapper {
      height: auto;
      padding: 14px 20px;
      text-align: center;
      transform: translateY(10vh);
      transition: transform ease-in-out 0.25s;
  	}
  }
}

 

Hi. Have you enabled Gallery Caption + Add some demo caption yet? I don't see gallery caption here. 

6 hours ago, tuanphan said:

Hi. Have you enabled Gallery Caption + Add some demo caption yet? I don't see gallery caption here. 

@tuanphan

Yes, gallery caption is enabled and there is a caption string associated with each gallery picture. To be clear, I'm trying to add the hover-over effect on the masonry gallery on the homepage.

17 hours ago, drwhittelsey said:

@tuanphan

Yes, gallery caption is enabled and there is a caption string associated with each gallery picture. To be clear, I'm trying to add the hover-over effect on the masonry gallery on the homepage.

Try this code

body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.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-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

Hey @tuanphan

Code works great but having one issue. I can't get the background to show up. See any issues with what I did?

// Masonry Hover Over //
body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.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-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}


a {background-image:none !important;}

Link: https://www.stetts.com/

Sorry @tuanphanto be more clear, the background opacity which is currently set to rgba (0,0,0,.5) is not showing on the hover over effect so I'm just getting the white text.

On 9/22/2021 at 9:26 AM, drwhittelsey said:

Hey @tuanphan

Code works great but having one issue. I can't get the background to show up. See any issues with what I did?

// Masonry Hover Over //
body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.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-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}


a {background-image:none !important;}

Link: https://www.stetts.com/

Use this new code

body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.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-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}