Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

drwhittelsey

Member
  • Posts

    10
  • Joined

  • Last visited

Everything posted by drwhittelsey

  1. 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.
  2. 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/
  3. @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.
  4. 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; } } }
  5. @digitalfreelancer Can you DM me the details?
  6. 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.
  7. 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 😞
  8. 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?
  9. 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 New...