Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API

From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
kiki3619213doh, and make sure that the wrapper is big enough to accommodate the enlarged element.
-
Lensflare1873412d@yemploy a little bit annoyed and somewhat amused.
It’s like watching a 3 year old trying to play guitar and making noise in a proud manner. -
AlgoRythm5031012dGood info. Done a similar thing for a different purpose. Wanted a button to be a certain size, but the interactive area to be about 10% larger (for aesthetic reasons. It actually worked really nicely)
-
devJs139912dDon't do anything on hover, even cursor pointer and especially transitions and transforms
-
retard73017dI just make the bg colour slightly darker and add a border effect. Simple and looks good.
In CSS, never ever enlarge anything by hover. There will exist a set of cursed cursor positions somewhere on the edge of fully zoomed out and fully zoomed in states, which will make your UI element twitch between two states at 60+ FPS.
If you want this effect, wrap the element you want to enlarge in a wrapper whose size won't change. Add :hover state on the wrapper, not the element, and change the element in that selector. It will make the curse go away.
wrong:
.zoom:hover { transform: scale(1.1) }
right:
.zoom-wrapper:hover .zoom { transform: scale(1.1) }
random