KaijuCorgi Posted August 12, 2020 Share Posted August 12, 2020 Site URL: https://pineapple-sapphire-khkb.squarespace.com/ I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor. Here is the CSS I'm using: .icon-swap-linkedin img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-linkedin img:nth-child(1):hover { opacity:0; } .icon-swap-twitter img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-twitter img:nth-child(1):hover { opacity:0; } .icon-swap-instagram img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-instagram img:nth-child(1):hover { opacity:0; } password is guava Link to comment
RyanDejaegher Posted August 12, 2020 Share Posted August 12, 2020 Hey @KaijuCorgi you don't need to use 2 different images. You could use SVG icons and then target the fill on hover to change the color. Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
KaijuCorgi Posted August 12, 2020 Author Share Posted August 12, 2020 Ooh, I didn't know that! It sounds like a much better way to handle it. I'll give it a shot. Thanks @RyanDejaegher! Link to comment
RyanDejaegher Posted August 12, 2020 Share Posted August 12, 2020 @KaijuCorgi no worries, if you get the SVG icons on the site and are still having trouble let me know and I can give you a hand Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
KaijuCorgi Posted August 12, 2020 Author Share Posted August 12, 2020 (edited) @RyanDejaegherI did get it to work on the first icon, but there are a couple snags. As you roll over the empty space in the icon (the "in"), the color effect goes off, causing a jittering effect if you move your mouse all the way across. Also, transition is being ignored outside the editor (I can't remember if this was working outside the editor before or not). I tried a version with a background fill color for the "in" instead of no fill, but that didn't seem to change anything. Looking at the svg code all I see is the dark fill. I'm learning the required css (and vector requirements) from scratch so this could def be user error. Edited August 12, 2020 by KaijuCorgi Link to comment
RyanDejaegher Posted August 13, 2020 Share Posted August 13, 2020 @KaijuCorgi looks like you were adding the hover on the path, so when you hover over the letters it breaks the effect, if you add the hover on the svg it will work. Try adding this to your custom CSS svg { fill: black; } svg:hover { fill: red; } Result: Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
KaijuCorgi Posted August 13, 2020 Author Share Posted August 13, 2020 (edited) Wow, I feel like I'm really missing something. I copy + pasted your css in, removed my additions to the svg code, and now it's not doing anything on hover. Clearly it should work 😕 I hugely appreciate all your help and this method is so slick. Could I do it the original way and set the image sizes, or will Squarespace override that? Edit: Did some google digging and found this thread: https://github.com/filamentgroup/grunticon/issues/235 "TL;DR: Also make sure there are no fill="xxxx" attribute in your svg markup" So I deleted that from my svg code and it worked! WHEW. I'll put in proper colors and see if I can get it working for the other two icons. Edited August 13, 2020 by KaijuCorgi 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