Image Card with Show/Hide Text

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

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

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

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