ShellJones Posted September 30, 2021 Share Posted September 30, 2021 I'm trying to duplicate the text hover effect from my portfolio page (pictured, top left image is hover) in a gallery section on another page using CSS. I'm a CSS novice. I've managed to get the opacity hover, however I'm stuck on how to get the text description to display on hover. .gallery-grid-item-wrapper:hover img { opacity: 0.8; transition: all ease-in-out 0.2s; } .gallery-item-description:hover img { opacity: 1; } Thanks, appreciate any help. Link to comment
tuanphan Posted October 5, 2021 Share Posted October 5, 2021 Hi, Can you share link to your site? We can check easier 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
ShellJones Posted October 6, 2021 Author Share Posted October 6, 2021 Oh I'm still in my trial, so I don't think I can....? Link to comment
paul2009 Posted October 6, 2021 Share Posted October 6, 2021 2 hours ago, ShellJones said: I'm still in my trial, so I don't think I can....? If the site is in a trial you can set a password in the visibility settings and share this with us. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
ShellJones Posted October 6, 2021 Author Share Posted October 6, 2021 (edited) Thank you. https://maracas-tuatara-jskx.squarespace.com/ password is 'apple' There are 4 gallery images on the homepage. I'm trying to replicate the caption hover effect from the 'Projects' page onto these images on the homepage. I'd also like to use the caption hover effect on 'Objects of Desire' page. Edited October 6, 2021 by ShellJones Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 4 hours ago, ShellJones said: Thank you. https://maracas-tuatara-jskx.squarespace.com/ password is 'apple' There are 4 gallery images on the homepage. I'm trying to replicate the caption hover effect from the 'Projects' page onto these images on the homepage. I'd also like to use the caption hover effect on 'Objects of Desire' page. Can you add some demo captions & enable Gallery caption first? We can check effect easier. 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
ShellJones Posted October 7, 2021 Author Share Posted October 7, 2021 Have done now, thanks in advance. Link to comment
tuanphan Posted October 8, 2021 Share Posted October 8, 2021 23 hours ago, ShellJones said: Have done now, thanks in advance. Add to Design > Custom CSS body.homepage { figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); z-index: 9999; text-align: center; pointer-events: none; opacity: 0; transition: all 0.3s !important; } .gallery-grid-item-wrapper { position: relative !important; } figure.gallery-grid-item { position: relative !important; } p.gallery-caption-content { color: black; font-size: 2rem !important; } figure:hover figcaption.gallery-caption.gallery-caption-grid-simple { opacity: 1 !important; transition: all 0.3s !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
ShellJones Posted October 8, 2021 Author Share Posted October 8, 2021 That worked perfectly!! I can't believe it! You are awesome! I am so appreciative, thank you SO much @tuanphan Link to comment
ShellJones Posted October 11, 2021 Author Share Posted October 11, 2021 Hey @tuanphanis it possible to do a similar text hover effect on the 'Library' page? The captions are much longer though, so I'm not sure how that would work. https://maracas-tuatara-jskx.squarespace.com/ password is 'apple' Link to comment
tuanphan Posted October 12, 2021 Share Posted October 12, 2021 10 hours ago, ShellJones said: Hey @tuanphanis it possible to do a similar text hover effect on the 'Library' page? The captions are much longer though, so I'm not sure how that would work. https://maracas-tuatara-jskx.squarespace.com/ password is 'apple' The images will be clickable or non-clickable? You will add captions or non-caption? 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
ShellJones Posted October 12, 2021 Author Share Posted October 12, 2021 Non-clickable. Captions yes, to reveal on hover. Link to comment
tuanphan Posted October 14, 2021 Share Posted October 14, 2021 On 10/13/2021 at 6:58 AM, ShellJones said: Non-clickable. Captions yes, to reveal on hover. Use this CSS /* Library page hover */ body#collection-614c0d638d723b5cb6c408e5 { /* Masonry hover 2 */ figure.gallery-grid-item { position: relative; } .gallery-caption, .gallery-caption-wrapper { position: static !important; z-index: 100 !important; top: unset; transform: unset; height: initial; opacity: 1 !important; } /* 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; } /* 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 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
David_Ledger Posted April 22, 2022 Share Posted April 22, 2022 On 10/8/2021 at 1:38 AM, tuanphan said: Add to Design > Custom CSS body.homepage { figcaption.gallery-caption.gallery-caption-grid-simple { position: absolute !important; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); z-index: 9999; text-align: center; pointer-events: none; opacity: 0; transition: all 0.3s !important; } .gallery-grid-item-wrapper { position: relative !important; } figure.gallery-grid-item { position: relative !important; } p.gallery-caption-content { color: black; font-size: 2rem !important; } figure:hover figcaption.gallery-caption.gallery-caption-grid-simple { opacity: 1 !important; transition: all 0.3s !important; } } @tuanphan Love this code. I am using it with the p.gallery-caption-content { color: black; font-size: 2rem !important; } swapped from 'black' to 'white'. Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance. Link to comment
tuanphan Posted April 26, 2022 Share Posted April 26, 2022 On 4/23/2022 at 6:16 AM, David_Ledger said: @tuanphan Love this code. I am using it with the p.gallery-caption-content { color: black; font-size: 2rem !important; } swapped from 'black' to 'white'. Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance. Possible. However can you share link to gallery? We can give code easier 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
Elisabethh Posted March 21 Share Posted March 21 Hello all, I am struggling with a similar issue. I am trying to obtain the following: - on Index Page, Gallery: on hover > Image Overlay with white overlay, 0,4 transparency - on Index Page, Gallery: Show title + text on hover Webpage: https://pale-studio.com/ Looking forward to your anwers, Elisabeth Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2023 at 5:41 PM, Elisabethh said: Hello all, I am struggling with a similar issue. I am trying to obtain the following: - on Index Page, Gallery: on hover > Image Overlay with white overlay, 0,4 transparency - on Index Page, Gallery: Show title + text on hover Webpage: https://pale-studio.com/ Looking forward to your anwers, Elisabeth Hi, Which section are you referring to, can you take a screenshot? I can't find gallery on header menu 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
Elisabethh Posted March 25 Share Posted March 25 Hi Tuanphan, here you go: (overview of home page construction _ gallery sections, plus simulation of effect I would like to achieve (text on hover with white background, slight transparency). Hopefully this is more helpful. Link to comment
tuanphan Posted March 29 Share Posted March 29 On 3/25/2023 at 6:59 PM, Elisabethh said: Hi Tuanphan, here you go: (overview of home page construction _ gallery sections, plus simulation of effect I would like to achieve (text on hover with white background, slight transparency). Hopefully this is more helpful. #1. Add to Design > Custom CSS section#uono-header:hover img { opacity: 0.4; } #2. With text Can you add text first? I don't see any text so can't test code to make text appear on hover 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
Elisabethh Posted March 31 Share Posted March 31 Thank you Tuanphan, the effect of the transparency works very well. (https://pale-studio.com/ > scroll down to 'Uono' section) I have temporarily added a text. Would it be possible for it to only show upon hover? Plus, i would like to exclude this effect on the Mobile version, since this effect wouldn't properly work. Many thanks for your help! So much appreciated. Link to comment
tuanphan Posted April 2 Share Posted April 2 On 4/1/2023 at 1:15 AM, Elisabethh said: Thank you Tuanphan, the effect of the transparency works very well. (https://pale-studio.com/ > scroll down to 'Uono' section) I have temporarily added a text. Would it be possible for it to only show upon hover? Plus, i would like to exclude this effect on the Mobile version, since this effect wouldn't properly work. Many thanks for your help! So much appreciated. Use this code to add hover for text @media screen and (min-width:901px) { .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body { opacity: 0; } section.Index-gallery:hover .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body { opacity: 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
Elisabethh Posted April 3 Share Posted April 3 Fantastic, many thanks! This was exactly what I was looking for. Last request: it is possible to have the entire text invisible (on .Index-gallery-item-content) for Mobile view? See image below (it doesnt look very nice). Thanks again! Link to comment
tuanphan Posted April 5 Share Posted April 5 On 4/3/2023 at 4:08 PM, Elisabethh said: Fantastic, many thanks! This was exactly what I was looking for. Last request: it is possible to have the entire text invisible (on .Index-gallery-item-content) for Mobile view? See image below (it doesnt look very nice). Thanks again! Use this new code @media screen and (min-width:901px) { section.Index-gallery:hover .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body { opacity: 1; } } .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body { opacity: 0; } Elisabethh 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment