drwhittelsey

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.

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/

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

Bumping, anyone have a solution to the above?

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; } } }

@digitalfreelancer Can you DM me the details?

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.

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 😞

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?

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.