gagica Posted October 16, 2020 Share Posted October 16, 2020 Site URL: https://guitar-coyote-2582.squarespace.com/config/design Can anybody help how to do this please? Link to comment
creedon Posted October 16, 2020 Share Posted October 16, 2020 Please describe what you want to happen when a gallery image is hovered over. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
gagica Posted October 16, 2020 Author Share Posted October 16, 2020 On the landing page i just want overlay to feel you can click on it. On the about page where team photos are i want to have short bios on purple background on hover. thnx. Link to comment
gagica Posted October 17, 2020 Author Share Posted October 17, 2020 22 hours ago, creedon said: Please describe what you want to happen when a gallery image is hovered over. Hi @Creedon Can you help please? Link to comment
tuanphan Posted October 17, 2020 Share Posted October 17, 2020 Which page? /config is url for site owner Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted October 18, 2020 Author Share Posted October 18, 2020 23 hours ago, tuanphan said: Which page? /config is url for site owner About page / staff images: https://guitar-coyote-2582.squarespace.com/config/ i dont have the site live yet, can this work? Link to comment
gagica Posted October 19, 2020 Author Share Posted October 19, 2020 On 10/17/2020 at 8:43 AM, tuanphan said: Which page? /config is url for site owner site pass: 12345 Link to comment
tuanphan Posted October 20, 2020 Share Posted October 20, 2020 To find page url, see this. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted October 20, 2020 Author Share Posted October 20, 2020 2 hours ago, tuanphan said: To find page url, see this. /about page and /home Link to comment
tuanphan Posted October 21, 2020 Share Posted October 21, 2020 Add to Page Settings > Advanced > Header <style> figure.gallery-grid-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-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper:after { background: blue; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted October 21, 2020 Author Share Posted October 21, 2020 Thank you Master. is there a way to make the font white only for the hover text? Link to comment
gagica Posted October 23, 2020 Author Share Posted October 23, 2020 @tuanphan On mobile looks off see attch. Is there a way to fix that? Can we make a name and title on that bio hoover please. Link to comment
tuanphan Posted October 23, 2020 Share Posted October 23, 2020 the text too long, you can shorten it Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted October 23, 2020 Author Share Posted October 23, 2020 @tuanphan on desktop looks very short even with this amount of text, can we make the text fit the box or can i controll font size on mobile? thnx man Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 On 10/24/2020 at 2:20 AM, gagica said: @tuanphan on desktop looks very short even with this amount of text, can we make the text fit the box or can i controll font size on mobile? thnx man Add to Page Settings > Advanced > Header <style> @media screen and (max-width:767px) { figure.gallery-grid-item * { font-size: 10px !important; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted October 26, 2020 Author Share Posted October 26, 2020 @tuanphan Thank you Sir. Link to comment
gagica Posted November 7, 2020 Author Share Posted November 7, 2020 @tuanphan www.robertdeanarchitects.com on landing page where we added the purple overlay on projects I can't click on them. Is it because we added the code? Can you help please? my client site is live now. Link to comment
gagica Posted November 9, 2020 Author Share Posted November 9, 2020 On 11/7/2020 at 7:45 AM, gagica said: @tuanphan www.robertdeanarchitects.com on landing page where we added the purple overlay on projects I can't click on them. Is it because we added the code? Can you help please? my client site is live now. Can you help please @tuanphan Link to comment
tuanphan Posted November 9, 2020 Share Posted November 9, 2020 2 hours ago, gagica said: Can you help please @tuanphan Can you remove hover code? I will send the new code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted November 9, 2020 Author Share Posted November 9, 2020 2 hours ago, tuanphan said: Can you remove hover code? I will send the new code will that effect the about page bios we did, i want to keep that. @tuanphan Link to comment
gagica Posted November 9, 2020 Author Share Posted November 9, 2020 @tuanphan if you can help on these issues it will be great. 1. Landing page project boxes not clickable ( i know your working on this) 2. Individual projects on mobile showing as 2 column, how do we make them 1 column. 3. About us page, group image on mobile not responsive (can we zoom out so we see them all) Website: www.robertdeanarchitects.com Thank you T. Link to comment
tuanphan Posted November 9, 2020 Share Posted November 9, 2020 3 hours ago, gagica said: @tuanphan if you can help on these issues it will be great. 1. Landing page project boxes not clickable ( i know your working on this) 2. Individual projects on mobile showing as 2 column, how do we make them 1 column. 3. About us page, group image on mobile not responsive (can we zoom out so we see them all) Website: www.robertdeanarchitects.com Thank you T. 1. Which code did you use? Can you paste here? 2. Add to Home > Design > Custom CSS /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } } 3. You mean about banner image? Add to About Page Settings > Advanced > Header <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 20vh; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gagica Posted November 10, 2020 Author Share Posted November 10, 2020 @tuanphan i used this one from you. But again i want to keep the bios i just want the change to happen on landing page where projects are. thnx man. <style> figure.gallery-grid-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: left; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper:after { background: #72649E; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper:after { opacity: 0.90; } /* remove gap */ figcaption { padding: 0 !important; } </style> <style> @media screen and (max-width:767px) { figure.gallery-grid-item * { font-size: 8px !important; } } </style> Link to comment
gagica Posted November 10, 2020 Author Share Posted November 10, 2020 @tuanphan did you see the code above, is that what you asked? thnx again. Link to comment
tuanphan Posted November 11, 2020 Share Posted November 11, 2020 15 hours ago, gagica said: @tuanphan did you see the code above, is that what you asked? thnx again. Can you add a caption for first image? I will test some code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.