dianap Posted April 28, 2020 Share Posted April 28, 2020 Hi all! I need a bit of help with adding a hover effect over the masonry grid for 7.1. I'd like the description on the masonry grid to show on hover, as well as darken the image itself. Example: http://demo.squarestud.io/grid-gallery-9 I've read through a lot of other posts, but can't quite seem to find exactly what I am looking for. Any assistance would greatly be appreciated!! Thank you in advance! Diana MadeleinePattison 1 Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 Can you share link to your site? dianap 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dianap Posted April 28, 2020 Author Share Posted April 28, 2020 1 minute ago, tuanphan said: Add to Home > Design > Custom CSS figure.gallery-masonry-item:hover img { filter: grayscale(1); } Hmm.. That seems to just add a grey filter over the image -- Is there a way to just darken it? Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 4 minutes ago, dianap said: https://chinahousehtx.squarespace.com/home PW: Squarespace Thank you! Add to Home > Design > Custom CSS figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,0.7); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 1; transition: all 0.5s; } dianap 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dianap Posted April 28, 2020 Author Share Posted April 28, 2020 1 minute ago, tuanphan said: Add to Home > Design > Custom CSS figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,0.7); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 1; transition: all 0.5s; } Perfect, thank you so much!!!! You are the best!!! Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 Just now, dianap said: Sorry -- one more question -- I noticed on some of the images, the text is not exactly in the middle -- vertically and horizontally.. Is there to make the text exactly in the center of each image? For desktop and mobile? Which image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dianap Posted April 28, 2020 Author Share Posted April 28, 2020 5 minutes ago, tuanphan said: Add to Home > Design > Custom CSS figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,0.7); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 1; transition: all 0.5s; } Sorry -- one more question -- I noticed on some of the images, the text is not exactly in the middle -- vertically and horizontally.. Is there to make the text exactly in the center of each image? For desktop and mobile? Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 Try this CSS .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dianap Posted April 28, 2020 Author Share Posted April 28, 2020 2 minutes ago, tuanphan said: Try this CSS .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } Perfect for all the images on desktop -- but still a littleeeeeee lower on mobile.. Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 @media screen and (max-width:767px) { .gallery-masonry-item { padding-bottom: 0 !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rodvaldr Posted April 28, 2020 Share Posted April 28, 2020 Sorry, but I am a newbie to 7.1 – how can a make the title show in a masonry gallery? https://oboe-vuvuzela-4bha.squarespace.com pw: Hasselblad 🙂 100% Squarespace since 2014. Expertise in design, typography and communications. Based in Stockholm, Sweden. Check my portfolio at rodvaldr.se. Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 Just now, rodvaldr said: Sorry, but I am a newbie to 7.1 – how can a make the title show in a masonry gallery? https://oboe-vuvuzela-4bha.squarespace.com pw: Hasselblad 🙂 Follow this rodvaldr 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 8 minutes ago, dianap said: Still not working 😞 Sorry I'm being so picky!! I see you moved title under image dianap 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 this invalid { .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } visibility: hidden; } dianap 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dianap Posted April 28, 2020 Author Share Posted April 28, 2020 10 minutes ago, tuanphan said: this invalid { .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } visibility: hidden; } Okay, I started from the very beginning and redid everything. It works now!!!! Thank you so much!! Link to comment
rodvaldr Posted April 28, 2020 Share Posted April 28, 2020 Thanks @tuanphan I've have come a bit further. The background works on hover, and the title shows up – but click-through is not working, neither on the image or the image title. Can this be done? Javascript wizardry? https://oboe-vuvuzela-4bha.squarespace.com pw: Hasselblad 🙂 100% Squarespace since 2014. Expertise in design, typography and communications. Based in Stockholm, Sweden. Check my portfolio at rodvaldr.se. Link to comment
scottscottsee Posted May 1, 2020 Share Posted May 1, 2020 (edited) @tuanphan, Is it possible to show a second image on a hover, for images in a gallery in 7.1? I'd like each gallery image (currently a masonry grid) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Site: https://seal-burgundy-yx98.squarespace.com/ Login with RobHutch Thanks! Edited May 1, 2020 by scottscottsee Link to comment
tuanphan Posted May 2, 2020 Share Posted May 2, 2020 21 hours ago, scottscottsee said: @tuanphan, Is it possible to show a second image on a hover, for images in a gallery in 7.1? I'd like each gallery image (currently a masonry grid) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Site: https://seal-burgundy-yx98.squarespace.com/ Login with RobHutch Thanks! You mean these images? First, edits images > Add links > then share link again, I will give the code to create hover effect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lincolnjubb Posted May 3, 2020 Share Posted May 3, 2020 @tuanphan how are you! I've added my hover effect. However, I can't make the image click through to a link any more? Site: https://earthworm-arugula-kzbt.squarespace.com/ What should I post into the Custom CSS editor? Link to comment
tuanphan Posted May 3, 2020 Share Posted May 3, 2020 6 minutes ago, lincolnjubb said: @tuanphan how are you! I've added my hover effect. However, I can't make the image click through to a link any more? Site: https://earthworm-arugula-kzbt.squarespace.com/ What should I post into the Custom CSS editor? your site is private Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lincolnjubb Posted May 3, 2020 Share Posted May 3, 2020 Sorry @tuanphan! Try now? PW: LINCHPIN Link to comment
tuanphan Posted May 3, 2020 Share Posted May 3, 2020 On 4/28/2020 at 5:56 PM, rodvaldr said: Thanks @tuanphan I've have come a bit further. The background works on hover, and the title shows up – but click-through is not working, neither on the image or the image title. Can this be done? Javascript wizardry? https://oboe-vuvuzela-4bha.squarespace.com pw: Hasselblad 🙂 18 minutes ago, lincolnjubb said: @tuanphan how are you! I've added my hover effect. However, I can't make the image click through to a link any more? Site: https://earthworm-arugula-kzbt.squarespace.com/ What should I post into the Custom CSS editor? Remove above & use this code figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before { background-color: rgba(236,0,0,.5); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before { opacity: 1; transition: all .5s } lincolnjubb 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lincolnjubb Posted May 3, 2020 Share Posted May 3, 2020 @tuanphan!You're amazing. Love your work. You're getting me through this edit, ha. Thank you. Link to comment
jwhitney Posted May 11, 2020 Share Posted May 11, 2020 (edited) @tuanphan Thank you so much for sharing this code!! I have a question, when I insert the below it breaks the links for some reason? When I remove the css Content line the link comes back but the effect is broken. Is there a way to bring the link back? Thank you!!! figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {background-color: rgba(255,255,255, 0.3); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 1; transition: all 0.5s; } Edited May 11, 2020 by jwhitney Link to comment
jwhitney Posted May 11, 2020 Share Posted May 11, 2020 I think I might've solved it - I changed the code to this and it seems to work! I'm not sure if it's completely correct though. figure.gallery-masonry-item { transition: all .2s ease-in-out; } figure.gallery-masonry-item:hover { background-color: #00000; opacity: 0.6; transition: all .2s ease-in-out; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment