drwhittelsey
-
Posts
10 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by drwhittelsey
-
-
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/
-
6 hours ago, tuanphan said:
Hi. Have you enabled Gallery Caption + Add some demo caption yet? I don't see gallery caption here.
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?
-
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; } } }
-
@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.
Create a Hover-Over
in Customize with code
Posted
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.