CODEWITHSUNDEEP
htmlcsshover
O. D.
O. D.

Reputation: 13

Scale bug with hover a div

Im new with HTML & CSS and this is my first question. I tried to make a box who scales from 1.0 to 0.8 when you hover it with your mouse.

It works fine when you're with the mouse in the middle (0.0 between 0.8) on the box.

But when you are between 0.8 and 1.0 area it goes crazy everytime I move my mouse.

I would like that the box scales to 0.8 when you hover the whole 1.0 area at any time. It should be scale back to 1.0 when I leave the fixed 1.0 area. Not any other area. I cant help myself.

Test it or see it: https://jsfiddle.net/cyLxLbya/

YouTube Video: https://youtu.be/4MT4hrK7DVE (left is between 0-0.8, right goes crazy between 0.8-1)

Upvotes: 1

Views: 592

Answers (1)

Damien
Damien

Reputation: 1217

The problem is your scroll event triggering and blurring while the element scales. You're detecting a :hover but when the element gets small enough it loses it's :hover state and tries to scale up again. And back again (as it goes into :hover again).

One of the ways to fix this would be to detect the hover on a parent element (that doesn't scale). For example: https://jsfiddle.net/cyLxLbya/1/

.box{
    display: inline-block;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75);
    transition: all 200ms ease;
    transition-duration: 0.2s; 
}

.hover:hover .box{
    transform: scale(0.8);
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75);
}

It's also advisable to move the transition to the box itself (not the hover state of the box).

Upvotes: 1

Related Questions