DevonHarris Posted February 4, 2022 Share Posted February 4, 2022 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 Link to comment
Beyondspace Posted February 6, 2022 Share Posted February 6, 2022 (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 Have you created the page with this rainbow yet? Can you share it with us? Edited February 6, 2022 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 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
DevonHarris Posted March 5, 2022 Author Share Posted March 5, 2022 (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 March 5, 2022 by DevonHarris 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