k3ats Posted July 13, 2020 Share Posted July 13, 2020 (edited) Site URL: https://www.kelseyeaton.com/ Hi! I want to add an image reveal when you hover over a text link in a section of my home page like the demo below. I have a business plan, if that helps. I'm not a developer, so if you can explain like I'm five years old how to do this that it would be much appreciated! Haha! I have attached the images that I want to use to this post (titles of images align with the text link they belong to). My Home Page (scroll down to "Selected Works" section for the list of text links): https://www.kelseyeaton.com/ Demo: https://tympanus.net/Development/RapidImageHoverMenuEffects/index2.html GitHub Files: https://github.com/codrops/RapidImageHoverMenuEffects/ Edited July 16, 2020 by k3ats removed images that were not helpful Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 Can you add Image Blocks under Text Blocks? Then i will check the code to create above effect. 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
k3ats Posted July 16, 2020 Author Share Posted July 16, 2020 (edited) On 7/15/2020 at 3:50 AM, tuanphan said: Can you add Image Blocks under Text Blocks? Then i will check the code to create above effect. I can add image blocks next to the text blocks but not under them. I don't know how to do that 😞 . Would adding image blocks next to the text blocks work? EDIT: I could also do something like this (screenshot), where I add an image block and the caption text over it with "Overlap" . Does that work better? Edited July 16, 2020 by k3ats More info Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 1 hour ago, k3ats said: I can add image blocks next to the text blocks but not under them. I don't know how to do that 😞 . Would adding image blocks next to the text blocks work? EDIT: I could also do something like this (screenshot), where I add an image block and the caption text over it with "Overlap" . Does that work better? Yes, i think it will be better. Try adding & let me know. I will check. 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
k3ats Posted July 16, 2020 Author Share Posted July 16, 2020 27 minutes ago, tuanphan said: Yes, i think it will be better. Try adding & let me know. I will check. Sounds good! They are all added now, thank you! Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 Add to Home > Design > Custom CSS .homepage .design-layout-overlap img { visibility: hidden; } .homepage .design-layout-overlap:hover img { visibility: visible; } k3ats 1 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
k3ats Posted July 16, 2020 Author Share Posted July 16, 2020 Works perfectly! Thank you! Link to comment
_the_new_artist Posted January 14, 2021 Share Posted January 14, 2021 Hi, I am trying to do the same thing on my website, but not on the homepage: www.thenewartist.co.uk/the-artists. I want an image to appear on hover across the list of names on this page. How can I adapt this code so it doesn't refer to homepage but to the page I want? Thanks!! Beyondspace 1 Link to comment
Beyondspace Posted January 15, 2021 Share Posted January 15, 2021 4 hours ago, _the_new_artist said: Hi, I am trying to do the same thing on my website, but not on the homepage: www.thenewartist.co.uk/the-artists. I want an image to appear on hover across the list of names on this page. How can I adapt this code so it doesn't refer to homepage but to the page I want? Thanks!! You can portfolio page for this feature Portfolio Pages – Squarespace Help BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
jenniferboddam Posted August 23, 2021 Share Posted August 23, 2021 @bangank36 I would basically like to do that hover but as a next / previous anchor, so when you hover over the word next it will show an image of the next one/title or a custom uploaded image for that. is it possible? Link to comment
moonlitdesign Posted March 7 Share Posted March 7 (edited) Hey @tuanphan do you have a code that would work on fluid engine 7.1 and isn't the homepage? I would love the image to smoothly follow the cursor not just appear if possible looking to achieve this on the 'inspired by' section: www.moonlitdesign.uk/our-story Edited March 7 by moonlitdesign Link to comment
tuanphan Posted March 8 Share Posted March 8 23 hours ago, moonlitdesign said: Hey @tuanphan do you have a code that would work on fluid engine 7.1 and isn't the homepage? I would love the image to smoothly follow the cursor not just appear if possible looking to achieve this on the 'inspired by' section: www.moonlitdesign.uk/our-story You can see this comment 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
Jayles87 Posted August 15 Share Posted August 15 Hi @tuanphan! I came across this thread and am looking to add gifs or videos to links as they're hovered over for my landing page. Like this website: https://www.adulalouschek.com/ My website is www.jessieayles.net I'm looking to do this on my landing page.. Link to comment
tuanphan Posted August 17 Share Posted August 17 On 8/15/2024 at 4:32 PM, Jayles87 said: Hi @tuanphan! I came across this thread and am looking to add gifs or videos to links as they're hovered over for my landing page. Like this website: https://www.adulalouschek.com/ My website is www.jessieayles.net I'm looking to do this on my landing page.. See this 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment