I am new to Webflow…so far so good as far as learning.
I’ve created my first button, for some reason the first time I hover over it something weird (like one of my background images) is flashing before the hover image appears.
After that it works fine until a page reload…I cannot figure out what it is!
Preview link: https://preview.webflow.com/preview/legends-of-ultima-static?preview=fe6c612a3fef1aa47ecc94a29a451c3f
Scroll down a bit to the buy button (can’t miss it)
I think it’s because you are doing an image swap and it takes a second for it to load that image. Each of them are 200k which is huge for such a small button. I suggest compressing those images using tinypng.com
Another thing is that the image doesnt actually change much, I’d suggest using CSS filters or even just a color overlay instead of doing an image swap. That way you’d also get to add a transition to it so it’s not so abrupt.
i’d also challenge your if you’re up for it to create those buttons in css. Would be an awesome task to do.
I have not done real code in so long it would be difficult This project is something I am doing for fun while I learn Webflow and some code again. I planned to shrink the images but I have still never seen a glitch like that before…super bizzare.
I will try that though and see if that was the cause (compression)
8kb now, same issue - it’s not that.
Image swaps are not really used very often now in the web. Have you tried doing a filter or overlay for it? You can likely avoid having to even do an image swap that way.
I’m just used to the old days, they were always used. I will remove the image overlay and see if it removes the glitch.
The issue is not a big deal, I am trying to learn WHY it’s doing what it’s doing rather than just “do something else”
I will look into filter overlay Again, I am brand new to this and have not done hand coding in like 10 years lol
Edit: I set a little overlay - this works well enough.