kellicox90 Posted February 16, 2021 Share Posted February 16, 2021 Site URL: https://eagle-pear-f8dr.squarespace.com/packages Hello I've got some css hover effects on 3 images that I would like to disable so that the caption shows on mobile. Currently requiring a touch to display on mobile which isn't overly intuitive. https://eagle-pear-f8dr.squarespace.com/packages this is the url and the password is emmac123 to view the site. Thanks Beyondspace 1 Link to comment
Beyondspace Posted February 18, 2021 Share Posted February 18, 2021 On 2/16/2021 at 9:20 AM, kellicox90 said: Site URL: https://eagle-pear-f8dr.squarespace.com/packages Hello I've got some css hover effects on 3 images that I would like to disable so that the caption shows on mobile. Currently requiring a touch to display on mobile which isn't overly intuitive. https://eagle-pear-f8dr.squarespace.com/packages this is the url and the password is emmac123 to view the site. Thanks There is a overlay when hover, how do you want it to be displayed? @media only screen and (max-width: 640px) { .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper { opacity: 1 !important; visibility: visible !important; position: relative !important; } } kellicox90 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
kellicox90 Posted February 19, 2021 Author Share Posted February 19, 2021 13 hours ago, bangank36 said: There is a overlay when hover, how do you want it to be displayed? @media only screen and (max-width: 640px) { .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper { opacity: 1 !important; visibility: visible !important; position: relative !important; } } Oh Thank you SO SO MUCH!!!! This works perfectly! Link to comment
abou Posted April 7 Share Posted April 7 Is there any way to change this to work for Gallery sections? This is the current code I have, I am new to this and tried applying the code previously given in the forum to the gallery blocks but couldn't figure it out. Website is http://abouhashish.co .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); height: 100%; padding: 0; opacity: 0; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-grid .gallery-caption-content { font-size: 7rem !important; color: white; padding: 1vw; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; transition: 0.1s } .gallery-caption-grid-masonry { max-width: unset; } @media only screen and (max-width: 640px) { .gallery-grid .gallery-caption-content:not(.grid-gallery-v2).layout-caption-overlay-hover gallery-caption-content { opacity: 1 !important; visibility: visible !important; position: relative !important; } } Link to comment
tuanphan Posted April 8 Share Posted April 8 On 4/7/2023 at 1:59 PM, abou said: Is there any way to change this to work for Gallery sections? This is the current code I have, I am new to this and tried applying the code previously given in the forum to the gallery blocks but couldn't figure it out. Website is http://abouhashish.co .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); height: 100%; padding: 0; opacity: 0; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } .gallery-grid .gallery-caption-content { font-size: 7rem !important; color: white; padding: 1vw; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; transition: 0.1s } .gallery-caption-grid-masonry { max-width: unset; } @media only screen and (max-width: 640px) { .gallery-grid .gallery-caption-content:not(.grid-gallery-v2).layout-caption-overlay-hover gallery-caption-content { opacity: 1 !important; visibility: visible !important; position: relative !important; } } Can you share link to page where you use Gallery Block? 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
abou Posted April 9 Share Posted April 9 On 4/8/2023 at 2:21 AM, tuanphan said: Can you share link to page where you use Gallery Block? https://www.abouhashish.co/ it's the bottom of the home page, the hats, hoodies, sweaters Link to comment
tuanphan Posted April 12 Share Posted April 12 On 4/10/2023 at 5:24 AM, abou said: https://www.abouhashish.co/ it's the bottom of the home page, the hats, hoodies, sweaters 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 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
abou Posted April 29 Share Posted April 29 On 4/12/2023 at 2:06 AM, tuanphan said: I see you figured it out? Yes, Thank you. Link to comment
jnmillre Posted May 23 Share Posted May 23 (edited) Hello, Is there any way to make it so gallery captions always are apparent in mobile view, but remain on hover in desktop view? As you can see in the screenshot, my mouse is hovering over the image with the caption visible. For mobile view, I want the captions to always be visible in this manner. This is the code I'm currently using: .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center vertically justify-content: center; // center horizontally } .gallery-grid .gallery-caption-content { font-size: 1.2rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } Edited May 23 by jnmillre Wanted to add picture Link to comment
tuanphan Posted May 28 Share Posted May 28 On 5/24/2023 at 5:27 AM, jnmillre said: Hello, Is there any way to make it so gallery captions always are apparent in mobile view, but remain on hover in desktop view? As you can see in the screenshot, my mouse is hovering over the image with the caption visible. For mobile view, I want the captions to always be visible in this manner. This is the code I'm currently using: .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center vertically justify-content: center; // center horizontally } .gallery-grid .gallery-caption-content { font-size: 1.2rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } Change your code to this new code @media screen and (min-width:992px) { .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center vertically justify-content: center; // center horizontally } .gallery-grid .gallery-caption-content { font-size: 1.2rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } } 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
jnmillre Posted June 1 Share Posted June 1 On 5/28/2023 at 1:32 AM, tuanphan said: Change your code to this new code @media screen and (min-width:992px) { .gallery-grid .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); // overlay color height: 100%; padding: 0; opacity: 0; pointer-events: none; } .gallery-grid .gallery-caption-wrapper { display: flex; align-items: center; // center vertically justify-content: center; // center horizontally } .gallery-grid .gallery-caption-content { font-size: 1.2rem !important; // caption font size color: white; //caption font color padding: 1vw; // padding around the caption } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; max-width: unset; } } Thank you! What alterations can I make to the code that center the captions on mobile view? Link to comment
tuanphan Posted June 3 Share Posted June 3 On 6/1/2023 at 11:40 PM, jnmillre said: What is your site url? We can check code on mobile 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment