cstearns Posted December 30, 2022 Share Posted December 30, 2022 Hello! I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well) Here is the website currently in progress https://lanternfish-goose-wczf.squarespace.com/config/ I've included the images where I want to add the captions. Here is an example website of someone who has done this, incase I didn't explain it clearly enough! https://www.lucas-sader.com/ (when you hover over their client list the captions come up) Any help would be great! Thanks! Link to comment
Beyondspace Posted December 31, 2022 Share Posted December 31, 2022 (edited) 20 hours ago, cstearns said: Hello! I'm building a website and want to add caption overlay to some images so when I hover the cursor over them they change color and captions appear (within these same images I would like to add links to videos as well) Here is the website currently in progress https://lanternfish-goose-wczf.squarespace.com/config/ I've included the images where I want to add the captions. Here is an example website of someone who has done this, incase I didn't explain it clearly enough! https://www.lucas-sader.com/ (when you hover over their client list the captions come up) Any help would be great! Thanks! You can use the image section, show the caption then set some css code to make the caption visible when you hover Css you can try on Home > Design > Custom Css .gallery-grid-item { position: relative; } .gallery-caption.gallery-caption-grid-simple { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; transition: opacity 0.5s ease; color: #fff; pointer-events:none; } .gallery-grid-item:hover .gallery-caption-grid-simple{ opacity: 1; } .gallery-grid-item .gallery-grid-item-wrapper:after { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: block; position: absolute; top:0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .gallery-grid-item:hover .gallery-grid-item-wrapper:after { opacity: 1; } .gallery-caption.gallery-caption-grid-simple h3 { color: red; } May be you can add the section Id on my previous code to set the effect only on your target section In addition, here is the advance effect you can consider. It requires javascript which is only available on business/ higher plan: Gallery Hovers — Beyondspace (squarespace.com) Support me by pressing 👍 or marking as solution if this useful for you Edited December 31, 2022 by Beyondspace 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
cstearns Posted January 11 Author Share Posted January 11 This is great! Your code is working better than the Beyond Space Gallery Hovers! So I'm going with that option! My only other question is there a way to adjust the Font that pops up after hovering over the image? I can't seem to find which one it is - the font I have on it now is a little small and difficult to read. Thanks you! 🙂 Link to comment
Beyondspace Posted January 12 Share Posted January 12 15 hours ago, cstearns said: This is great! Your code is working better than the Beyond Space Gallery Hovers! So I'm going with that option! My only other question is there a way to adjust the Font that pops up after hovering over the image? I can't seem to find which one it is - the font I have on it now is a little small and difficult to read. Thanks you! 🙂 Can you share the link to this element? 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
JuliaFish Posted January 13 Share Posted January 13 This code has been super helpful! I'm struggling to keep the text from going edge to edge - is this something that you can help with? I tried using text: {margin: auto; width: 80%} on the blocks but then the text block is left aligned. .gallery-caption.gallery-caption-grid-simple { position: absolute; top: 50%; transform: translateY(-50%); text: {margin: auto; width: 80%} opacity: 0; transition: opacity 0.5s ease; color: #fff; pointer-events:none; } Here is the sample page: https://truecallingmedia.com/new-tc-home Link to comment
tuanphan Posted January 18 Share Posted January 18 On 1/14/2023 at 6:00 AM, JuliaFish said: This code has been super helpful! I'm struggling to keep the text from going edge to edge - is this something that you can help with? I tried using text: {margin: auto; width: 80%} on the blocks but then the text block is left aligned. .gallery-caption.gallery-caption-grid-simple { position: absolute; top: 50%; transform: translateY(-50%); text: {margin: auto; width: 80%} opacity: 0; transition: opacity 0.5s ease; color: #fff; pointer-events:none; } Here is the sample page: https://truecallingmedia.com/new-tc-home You mean reduce these padding? 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
gnettles Posted January 25 Share Posted January 25 Does this code work on a Masonry Grid? If so what do i change in this code? Link to comment
cstearns Posted January 25 Author Share Posted January 25 On 1/12/2023 at 5:03 AM, Beyondspace said: Can you share the link to this element? Are you referring to the website link? https://lanternfish-goose-wczf.squarespace.com/config/ 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