Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image Reveal on Hover of Text Link


k3ats

Question

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 by k3ats
removed images that were not helpful
Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS .homepage .design-layout-overlap img { visibility: hidden; } .homepage .design-layout-overlap:hover img { visibility: visible; }  

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

Posted Images

8 answers to this question

Recommended Posts

  • 0

 

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?

 

Screen Shot 2020-07-16 at 8.12.11 AM.png

Edited by k3ats
More info
Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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 post
  • 0
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

Greeting, it's BaNgan from 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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...