emlewis Posted March 7, 2023 Share Posted March 7, 2023 I'm trying to create a flip effect on four photos so when you hover over them or click on them it will flip around to some text on the "back." I'm able to see some videos on Youtube for this but I'm so far not seeing anything with how to do this using Fluid Engine, only on the classic editor setting them as poster images. Does anyone have any thoughts on how to do this using Fluid Engine (I'm guessing this will entail needing some JavaScript either way?). Thanks! Link to comment
Ziggy Posted March 8, 2023 Share Posted March 8, 2023 If you're happy to use code, then you may be able to use and adapt this: https://www.w3schools.com/howto/howto_css_flip_card.asp Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
emlewis Posted March 8, 2023 Author Share Posted March 8, 2023 Thanks for the reply to this too! I actually figured it out yesterday and they look really cool 🙂 Thanks! Ziggy 1 Link to comment
Ziggy Posted March 8, 2023 Share Posted March 8, 2023 Fantastic, can you share your results? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
emlewis Posted March 8, 2023 Author Share Posted March 8, 2023 We haven't made the website public yet but I definitely can once we do! I ended up using the code from this article though: https://www.will-myers.com/articles/image-block-flip-effect-for-poster-images-in-squarespace Link to comment
Ziggy Posted March 8, 2023 Share Posted March 8, 2023 How did you do that on Fluid Engine without the poster image blocks? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
emlewis Posted March 8, 2023 Author Share Posted March 8, 2023 Oh yeah I didn't with Fluid Engine, I just added in a section using the classic editor! Link to comment
Ziggy Posted March 8, 2023 Share Posted March 8, 2023 Ah, fair enough! Sorry I didn't suggest that answer, but I was looking specifically for an FE solution. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
emlewis Posted March 8, 2023 Author Share Posted March 8, 2023 That's okay! I had asked about doing it in Fluid Engine so that was the right answer and now I'll know for next time! 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