tuanphan Posted July 20, 2022 Share Posted July 20, 2022 14 hours ago, carin said: Hello @tuanphan, I would like to use Hello @tuanphan, I would like to use this code but on the "slideshow: reel" gallery type instead. Would you happen to be able to provide a version of the code that would work for this? 🙂 Use this code to Design > Custom CSS /* Reel hover */ .gallery-reel .gallery-caption-reel { visibility: visible !important; top: 50% !important; margin: 0; transition: all 0.3s; z-index: 9999999; } figure:hover .gallery-caption-reel { opacity: 1 !important; transition: all 0.3s; } /* Overlay Color */ .gallery-reel-item-src:after { content: ""; background-color: rgba(255,255,255,0.75); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } figure:hover .gallery-reel-item-src:after { opacity: 1; transition: all 0.3s; } If need to apply on one page, use this code to Page Header <style> /* Reel hover */ .gallery-reel .gallery-caption-reel { visibility: visible !important; top: 50% !important; margin: 0; transition: all 0.3s; z-index: 9999999; } figure:hover .gallery-caption-reel { opacity: 1 !important; transition: all 0.3s; } /* Overlay Color */ .gallery-reel-item-src:after { content: ""; background-color: rgba(255,255,255,0.75); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } figure:hover .gallery-reel-item-src:after { opacity: 1; transition: all 0.3s; } </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
kiyary Posted August 18, 2022 Share Posted August 18, 2022 (edited) Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me? This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it. <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> thank you so much EDIT to add my site is kiyary.com thanks! Edited August 18, 2022 by kiyary Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 On 8/18/2022 at 8:30 PM, kiyary said: Hello @tuanphanI am back from the dead to this code, which worked wonderfully until now, I think square space updated something and now all the texts appear as a caption and not on hoover. Please could you help me? This is the code which was working but now it doesnt and I dont know why 😞 or how to fix it. <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> thank you so much EDIT to add my site is kiyary.com thanks! I see it looks fine here https://www.kiyary.com/portraits Caption appear in lightbox caption disappear in grid view What is your problem? 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
kiyary Posted August 21, 2022 Share Posted August 21, 2022 7 hours ago, tuanphan said: I see it looks fine here https://www.kiyary.com/portraits Caption appear in lightbox caption disappear in grid view What is your problem? Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone. I need to caption to appear on hover, like they do for my projects, but in the masonry grid So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you This is the code I have, which of course I do not understand , this is foreign language for me haha. <script> jQuery(document).ready(function($){ $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){ var text = $(this).find('img').attr("alt"); console.log(text); $(this).append('<div class="lightbox-caption">' + text + '</div>'); }) }) </script> <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> <script> Link to comment
tuanphan Posted August 23, 2022 Share Posted August 23, 2022 On 8/21/2022 at 3:55 PM, kiyary said: Hello @tuanphan! thank you for getting back to me. I wish I could find answers without troubling anyone. I need to caption to appear on hover, like they do for my projects, but in the masonry grid So, instead of appearing like this, the captions appear underneath 😞, there is no hover or overlay with text. and I didnt change the code or anything. Do you know what happened? or how to fix this issue? thank you This is the code I have, which of course I do not understand , this is foreign language for me haha. <script> jQuery(document).ready(function($){ $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){ var text = $(this).find('img').attr("alt"); console.log(text); $(this).append('<div class="lightbox-caption">' + text + '</div>'); }) }) </script> <style> .lightbox-caption { color: grey; font-weight: light; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -35px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style> <script> Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here 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
kiyary Posted August 24, 2022 Share Posted August 24, 2022 On 8/23/2022 at 4:43 AM, tuanphan said: Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here Hello Tuan! Yes, here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images. Thank you!!!! Link to comment
kiyary Posted August 24, 2022 Share Posted August 24, 2022 On 8/23/2022 at 4:43 AM, tuanphan said: Can you enable Gallery Caption & add some demo captions? Currently I don't see any caption here 1 hour ago, kiyary said: Hello Tuan! Yes, here is activated: https://www.kiyary.com/editorial-illustration , the captions appear underneath the images. Thank you!!!! Hi @tuanphan I am using again the same code you provided long ago, .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; /* enable click */ } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 2rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } but it has no effect 😞 Link to comment
tuanphan Posted August 26, 2022 Share Posted August 26, 2022 On 8/25/2022 at 2:59 AM, kiyary said: Hi @tuanphan I am using again the same code you provided long ago, .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; /* enable click */ } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 2rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } but it has no effect 😞 If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry. Use this new code /* Gallery Section Masonry Hover */ figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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; color: white; } .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper: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; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } 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
JennSolo Posted September 5, 2022 Share Posted September 5, 2022 (edited) Hi @tuanphan- Hopping in this thread as I am using the Gallery Block in the new fluid engine and cannot get the code to work for the title hover on the images. Any help would be great. Thanks Edited September 5, 2022 by JennSolo Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/5/2022 at 7:34 AM, JennSolo said: Hi @tuanphan- Hopping in this thread as I am using the Gallery Block in the new fluid engine and cannot get the code to work for the title hover on the images. Any help would be great. Thanks Can you share link to page where you added Gallery Block? 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
JennSolo Posted September 7, 2022 Share Posted September 7, 2022 @tuanphan Here is the link (gallery block is on homepage under carosel) https://seahorse-cylinder-lg2j.squarespace.com/ Password is: portfolio Link to comment
tuanphan Posted September 8, 2022 Share Posted September 8, 2022 22 hours ago, JennSolo said: @tuanphan Here is the link (gallery block is on homepage under carosel) https://seahorse-cylinder-lg2j.squarespace.com/ Password is: portfolio You mean Feature Videos section? Initial: show image Hover: Show image, show overlay, show title over overlay How about link? 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
kiyary Posted September 8, 2022 Share Posted September 8, 2022 On 8/26/2022 at 11:43 AM, tuanphan said: If you look at the code, you will see "grid". This code for Gallery Grid. Your page uses Gallery Masonry. Use this new code /* Gallery Section Masonry Hover */ figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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; color: white; } .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper: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; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work. thank you anyways Link to comment
tuanphan Posted September 9, 2022 Share Posted September 9, 2022 17 hours ago, kiyary said: Hello @tuanphan I added the code on advancec - code injection but then the code appears at the botton on the footer and it doesnt work. thank you anyways That code is CSS, you need to add it to Design > Custom CSS 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
NT111 Posted March 16, 2023 Share Posted March 16, 2023 Hello @tuanphan I am using gallery strips format. I successfully got the captions to show up over the image when hovering, but I haven't successfully achieved the following: 1) removing the extra white space from the hidden caption 2) having a caption show up in Lightbox underneath the image What code do I need to add? Thank you! --- Code I am using is below: figure.gallery-strips-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: 20%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-strips-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-strips-item-wrapper a:after { background: rgba(255,255,255,0.90); content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-strips-item:hover .gallery-strips-item-wrapper a:after { opacity: 0.85; } .gallery-caption p {white-space:pre; text-align:center} Link to comment
lina1570047784 Posted April 25, 2023 Share Posted April 25, 2023 Hello @tuanphan , I've tried a few of the codes you've provided earlier in this thread but they don't seem to work for me. Do you mind helping me out? I'm using Gallery Grid in 7.1 and would like the captions + semi opaque color (black or white) to appear on the image when hovering the image. I'd also like the caption to be visible in lightbox view. Is this possible? chiton-nectarine-r7sw.squarespace.com pw: desktoprain Link to comment
tuanphan Posted April 26, 2023 Share Posted April 26, 2023 On 3/16/2023 at 7:12 AM, NT111 said: Hello @tuanphan I am using gallery strips format. I successfully got the captions to show up over the image when hovering, but I haven't successfully achieved the following: 1) removing the extra white space from the hidden caption 2) having a caption show up in Lightbox underneath the image What code do I need to add? Thank you! --- Code I am using is below: figure.gallery-strips-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: 20%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-strips-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-strips-item-wrapper a:after { background: rgba(255,255,255,0.90); content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-strips-item:hover .gallery-strips-item-wrapper a:after { opacity: 0.85; } .gallery-caption p {white-space:pre; text-align:center} Sorry. I don't see your comment. Do you still need help? Can you share link? 18 hours ago, lina1570047784 said: Hello @tuanphan , I've tried a few of the codes you've provided earlier in this thread but they don't seem to work for me. Do you mind helping me out? I'm using Gallery Grid in 7.1 and would like the captions + semi opaque color (black or white) to appear on the image when hovering the image. I'd also like the caption to be visible in lightbox view. Is this possible? chiton-nectarine-r7sw.squarespace.com pw: desktoprain I see you figured it out? 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
lina1570047784 Posted April 26, 2023 Share Posted April 26, 2023 2 minutes ago, tuanphan said: Sorry. I don't see your comment. Do you still need help? Can you share link? I see you figured it out? Oh, sorry, I was literally just testing out your Masonry code, but it was for 1 minute. Now I'm back with Grids and the question is still valid. Link to comment
lina1570047784 Posted April 26, 2023 Share Posted April 26, 2023 (edited) 22 hours ago, tuanphan said: I see you figured it out? No, sorry @tuanphan, I haven't figured it out. Happy for some help, if possible. I'm using 7.1 Gallery Grids. I would like the hover function + no extra white space underneath the images (where the captions should have been) + captions in Lightbox mode. Edited April 27, 2023 by lina1570047784 clarify all needs Link to comment
twc001 Posted April 26, 2023 Share Posted April 26, 2023 Hi @tuanphan wondering if you have a quick fix here. I am on squarespace 7.1 using the Grid:Simple Portfolio page where the title shows directly underneath the image. Would like to replicate a feature similar to this site where when you hover over the image, the text is hidden until you hover over the image then it appears below left aligned See reference here https://galeriehalf.com/ I know you are able to do hover overlay on the portfolio page but I would prefer to have the title below the image and not on top. Any suggestions on adding code the the portfolio grid? Thank you Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 On 4/26/2023 at 4:36 PM, tuanphan said: Sorry. I don't see your comment. Do you still need help? Can you share link? I see you figured it out? With Homepage, use this CSS body.homepage { figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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-strips-item:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-strips-item-wrapper a:after { background: rgba(255,255,255,0.9); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-strips-item:hover .gallery-strips-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } } 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
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 On 4/27/2023 at 6:58 AM, twc001 said: Hi @tuanphan wondering if you have a quick fix here. I am on squarespace 7.1 using the Grid:Simple Portfolio page where the title shows directly underneath the image. Would like to replicate a feature similar to this site where when you hover over the image, the text is hidden until you hover over the image then it appears below left aligned See reference here https://galeriehalf.com/ I know you are able to do hover overlay on the portfolio page but I would prefer to have the title below the image and not on top. Any suggestions on adding code the the portfolio grid? Thank you What is your site url? We can help easier 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
lina1570047784 Posted May 22, 2023 Share Posted May 22, 2023 Hi, @tuanphan, I see that we're 2 people asking similar questions here. My question is: I'm using 7.1 Gallery Grids, Strips. I would like the caption hover function + no extra white space underneath the images (where the captions should have been) + if possible captions in Lightbox mode too. Happy for some help, if possible. https://chiton-nectarine-r7sw.squarespace.com pw: rainyday2 Link to comment
tuanphan Posted May 25, 2023 Share Posted May 25, 2023 On 5/22/2023 at 3:42 PM, lina1570047784 said: Hi, @tuanphan, I see that we're 2 people asking similar questions here. My question is: I'm using 7.1 Gallery Grids, Strips. I would like the caption hover function + no extra white space underneath the images (where the captions should have been) + if possible captions in Lightbox mode too. Happy for some help, if possible. https://chiton-nectarine-r7sw.squarespace.com pw: rainyday2 Add to Design > Custom CSS /* Gallery hover - with No Link */ figure[class*="gallery"] { position: relative; } .gallery-caption { position: static; } /* title */ figcaption .gallery-caption-wrapper p.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; } figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ div[class*="-item-wrapper"]:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } With lightbox caption, see this https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/ 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
lina1570047784 Posted May 25, 2023 Share Posted May 25, 2023 1 hour ago, tuanphan said: Add to Design > Custom CSS Thank you so much! Actually, @tuanphan, I just decided I will leave the hover function and just keep regular captions. But how do I get captions in lightbox mode? 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