bbs0013 Posted December 20, 2023 Posted December 20, 2023 Hi there! I am trying to add a text reveal on image hover to my client's website, and when I add the custom CSS code I can see it working when I'm in the Edit mode, but after I save and exit Edit mode nothing happens... could you help me out to figure out why? The code I'm using is: @media only screen and (min-width: 640px){ #block-12345 { opacity: 0; transition: opacity 1s } #block-12345:hover { opacity: 1; transition: opacity 1s } }
Ziggy Posted December 20, 2023 Posted December 20, 2023 Can I assume that you've removed the real block IDs from the code you shared? Are you trying to target the entire block to fade in/out? Can you share your website URL and this page? 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
bbs0013 Posted December 20, 2023 Author Posted December 20, 2023 1. Yes, it's just a generic block ID in the code I shared. I'm using a Chrome extension to find each block's ID, I have multiple images in the section design. 2. Yes, I want the entire block to face in/out. Basically the idea was that the hover with the text covers the full image. 3. The website is not public yet, so will the link work? https://vanilla-iguana-re7k.squarespace.com/config/pages
Solution Ziggy Posted December 20, 2023 Solution Posted December 20, 2023 16 minutes ago, bbs0013 said: 3. The website is not public yet, so will the link work? Only if you add a site wide password: https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website The issue you are probably running into is that block opacity is being used for the site animation and overriding your code. If you add !important to the opacity in both parts of the code it should start working. bbs0013 1 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
bbs0013 Posted December 20, 2023 Author Posted December 20, 2023 I just added !important to the opacity and it works!! Yay! THANK YOU SO MUCH!! you're the best 🙂 Happy holidays! Ziggy 1
Ziggy Posted December 20, 2023 Posted December 20, 2023 5 minutes ago, bbs0013 said: I just added !important to the opacity and it works!! Yay! THANK YOU SO MUCH!! you're the best 🙂 Happy holidays! Excellent! bbs0013 1 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment