Hi, I am attempting to create a basic button hover interaction for the social share buttons on this page: https://classlink.webflow.io/blog/passwords-permissions-and-student-data
They behave pretty much the way I want, except that when zoomed out or viewed on a higher res display there is a border of white pixels around the inner edge of the container element on the hover state.
Here is my public share link: Webflow - ClassLink Live
That screenshot you’ve got there is definitely strange, but on my monitor (5k) it seems like 50x50 isn’t quite large enough to completely cover up the container on the Twitter icon, because the Twitter icon is not square. If you set the interaction to push it to 60x60 that fixes it for me.
Do ALL of the buttons do that for you? Considering your screenshot, I feel as if I’ve identified a problem that is separate from what you’re describing.
Did increasing the end size of the circle fix it on your screen? Pushing it further past the bounds of the div didn’t work on my end
Just use scale instead of size. Make your inner fill object’s width and height to be 100% of its parent container first. Then inside the ix start with scale of 0 for that object (it is invisible) and then animate it to grow to a scale of about 1.1. This way it will 100% fill the entire inner area.
Thanks so much for the reply, however I didn’t really understand your approach, I’m not having an issue filling the mask div completely, it is the strange border of white pixels that show up on some displays. Here is the result I got when using percentage values instead of px trying to replicate your method (white space still present along top edge of fb share button):
Yeah, the problem could be with browser rendering masks (when using overflow:hidden), I don’t think there is anything that can be done aside from changing background colour of the mask div together with the inner div growth. It worked when I tried this approach, but the bg change has to be timed correctly to not be visible in the ix
Thank you so much for your suggestion, looks a lot better with the bg transition.
