CODEWITHSUNDEEP
csstransition
BenMorel
BenMorel

Reputation: 36632

Why is transform:scale not kept on :hover?

I am using this CSS:

.link {
    transition: all .2s ease-in-out;
}
.link:hover {
    transform: scale(1.1);
}

When I hover the text, it's scaled to 110% as expected, but as soon as the transition is finished, it scales back to 100% even though the mouse pointer is still on the text.

When I remove the mouse pointer from the text, the animation scales to 110% then back to 100% in a flash.

See this fiddle for a demo.

How can I make it keep the 110% scale until the pointer leaves the text?

Upvotes: 4

Views: 8112

Answers (2)

lmgonzalves
lmgonzalves

Reputation: 6588

You need to define a link as display: inline-block, and add prefixes. CSS:

.link {
    display: inline-block;
}

.link:hover {
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);
}

FIDDLE

Upvotes: 15

ninie1616
ninie1616

Reputation: 151

Can you use Jquery ?

$(".link").hover(function(){ ... });

or maybe

$(".link").mouseover(function(){ ... });

Upvotes: -2

Related Questions