oscarmay_ Posted November 17, 2021 Share Posted November 17, 2021 Site URL: https://www.oscarmay.com/ Hi there, I've been using custom css to have captions appear when hovering on the image. They've been working great for a long time, but I checked the website earlier and the image is not displaying unless I hover over the image. I did add some extra code to the custom css the other day (changing responsiveness of gallery at certain media sizes), the site seemed to work ok at first, now it isnt. Hopefully someone may be able to help 🙏 The website is; www.oscarmay.com This is the code I have in place right now; figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 85% !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-masonry-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.50; } /* remove gap */ figcaption { padding: 0 !important; } figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 75% !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.40; } /* remove gap */ figcaption { padding: 0 !important; } @media only screen and (max-width: 1400px) { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 14px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 3px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { h1 {font-size:28px!important;}} Link to comment
Beyondspace Posted November 18, 2021 Share Posted November 18, 2021 3 hours ago, oscarmay_ said: Site URL: https://www.oscarmay.com/ Hi there, I've been using custom css to have captions appear when hovering on the image. They've been working great for a long time, but I checked the website earlier and the image is not displaying unless I hover over the image. I did add some extra code to the custom css the other day (changing responsiveness of gallery at certain media sizes), the site seemed to work ok at first, now it isnt. Hopefully someone may be able to help 🙏 The website is; www.oscarmay.com This is the code I have in place right now; figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 85% !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-masonry-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.50; } /* remove gap */ figcaption { padding: 0 !important; } figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #e0e0e0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 1000ms !important; opacity: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 75% !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #e0e0e0; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 100ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.40; } /* remove gap */ figcaption { padding: 0 !important; } @media only screen and (max-width: 1400px) { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 14px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 3px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } @media only screen and (max-width: 750px) { h1 {font-size:28px!important;}} Hi, You can try adding to Home > Design > Custom Css .gallery-caption.gallery-caption-grid-masonry p { opacity: 0 !important; } Let me know if it works properly on your site Press 👍 or mark this answer as solution to oscarmay_ 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
oscarmay_ Posted November 18, 2021 Author Share Posted November 18, 2021 That fixed it, thank you so much! Beyondspace 1 Link to comment
fbook Posted April 20, 2022 Share Posted April 20, 2022 Thanks so much for this code. Can you suggest a code that can increase the font and change its colour? Link to comment
Beyondspace Posted April 21, 2022 Share Posted April 21, 2022 4 hours ago, fbook said: Thanks so much for this code. Can you suggest a code that can increase the font and change its colour? Can you share your site with the protected password? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 On 4/25/2022 at 7:18 AM, fbook said: fox, thanks If you still need help, please share site url, 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
fbook Posted May 2, 2022 Share Posted May 2, 2022 (edited) Thank you 🙂 Can you suggest a code that will allow these captions to only appear on rollovers? The site's url is https://jaycefox.squarespace.com and the password is "fox" Here is the code I am currently using... p.gallery-caption-content { font-size: 22px !important; } figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; background: rgba(0,0,0,0.5); color: white; left: 0; text-align: center; img:hover } Edited May 2, 2022 by fbook More information added Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 On 5/2/2022 at 11:59 PM, fbook said: Thank you 🙂 Can you suggest a code that will allow these captions to only appear on rollovers? The site's url is https://jaycefox.squarespace.com and the password is "fox" Here is the code I am currently using... p.gallery-caption-content { font-size: 22px !important; } figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; background: rgba(0,0,0,0.5); color: white; left: 0; text-align: center; img:hover } Can you enable caption first? I currently don't see any 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment