Blurry hover interaction

I made a mouse animation: on hover state I want to turn a dot into a round border. Now the problem is… when I hover it seems blurry. When zooming in and out it’s fixed. Probably something with scaling, but I still think it’s weird. Who knows what to do?

https://a-temporary-portfolio-2021.webflow.io/


Here is my public share link: LINK
(how to access public share link)

@wolfbew - are you using a small image for the donut shaped cursor? It looks like a small image being enlarged that is causing the pixelation - you should be able to do this with CSS rather than images.

@sam-g its just a DIV block with a border. I sad the bg-color to grey with a border of 1 px, next i animate the bg-color to transparent en scale up the DIV.

@wolfbew - take a look at this article: css - CSS3 scale() causes divs to become pixelated - Stack Overflow

@sam-g Officially declared you hero of the day. Thnx!

1 Like