dianap 1 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 post
tuanphan 8,966 Share Posted April 28, 2020 Can you share link to your site? dianap 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
dianap 1 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 post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
dianap 1 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 post
tuanphan 8,966 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? You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
dianap 1 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 post
tuanphan 8,966 Share Posted April 28, 2020 Try this CSS .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
dianap 1 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 post
tuanphan 8,966 Share Posted April 28, 2020 @media screen and (max-width:767px) { .gallery-masonry-item { padding-bottom: 0 !important; } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
rodvaldr 1,078 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 and explore my free code snippets for Brine at rodvaldr.dev Link to post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
tuanphan 8,966 Share Posted April 28, 2020 this invalid { .gallery-item-description { transform: translateY(-50%); top: 50% !important; height: 50px !important; } visibility: hidden; } dianap 1 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
dianap 1 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 post
rodvaldr 1,078 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 and explore my free code snippets for Brine at rodvaldr.dev Link to post
scottscottsee 2 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 post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
lincolnjubb 0 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 post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
tuanphan 8,966 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 You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
lincolnjubb 0 Share Posted May 3, 2020 @tuanphan!You're amazing. Love your work. You're getting me through this edit, ha. Thank you. Link to post
jwhitney 0 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 post
jwhitney 0 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 post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment