Jump to content

Image Card with Show/Hide Text

Recommended Posts

Posted

Site URL: http://www.tlastmarks.com

Hi everyone!  

My client is looking to have a completely responsive/interactive rainbow on their website.  Each 'color' of the rainbow corresponds to a different 'trait'.  The client would like the rainbow to ideally have a hidden/reveal feature, in which hovering over the different colors would reveal their matching 'trait'.  See below for a quick drawing of what they are looking for.  I understand this would likely require java and/or jQuery which I know nothing about.  To confirm, natural state would show no text, hover states would reveal different texts.   Ex: when Red is hovered, the text for "kindness" appears, when Green is hovered, the text for "generosity" appears, etc.  

Hoping and praying someone can help me figure this out.  

@bangank36 @creedon

unnamed.jpg

  • Replies 2
  • Views 385
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)
On 2/4/2022 at 7:24 AM, DevonHarris said:

Site URL: http://www.tlastmarks.com

Hi everyone!  

My client is looking to have a completely responsive/interactive rainbow on their website.  Each 'color' of the rainbow corresponds to a different 'trait'.  The client would like the rainbow to ideally have a hidden/reveal feature, in which hovering over the different colors would reveal their matching 'trait'.  See below for a quick drawing of what they are looking for.  I understand this would likely require java and/or jQuery which I know nothing about.  To confirm, natural state would show no text, hover states would reveal different texts.   Ex: when Red is hovered, the text for "kindness" appears, when Green is hovered, the text for "generosity" appears, etc.  

Hoping and praying someone can help me figure this out.  

@bangank36 @creedon

unnamed.jpg

Have you created the page with this rainbow yet? Can you share it with us?

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

  • 4 weeks later...
Posted (edited)
On 2/6/2022 at 10:12 AM, bangank36 said:

Have you created the page with this rainbow yet? Can you share it with us?

Hi!  I'm still working on it.  Unfortunately it really can't be done on SS but rather I've been working on the coding.  Could use some help though!  I've managed to get the red and orange done, but not the rest.  I merged a generic flexbox code with this pre-made rainbow code, and inserted the text.  Except it needs a little work and I honestly haven't had the time 😕   The one major thing I can't figure out is why the 'red' text isn't appearing when the mouse hovers on the right side of the rainbow, and only appears when the mouse hovers on the top or left...I'm also having trouble bottom-aligning it.  I had to add so many 'wrapper' tags I think I confused myself haha!

The regular rainbow code is here, courtesy Megan Elizabeth:
https://codepen.io/meganeday7/pen/xxqYjxZ

And my flexbox, text reveal rainbow is here:
https://codepen.io/Devonharris4/pen/mdqOaKB

 

Edited by DevonHarris

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.