Why transformation: scale is not saved: hover over?

Question

I am using this CSS:

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

When I find the text, it scales to 110% as expected, but once the transition is complete, it scales to 100% even if the mouse is still in the text.

When I remove the mouse pointer from the text, the animation is scaled to 110% and then back to 100% during the flash.

See this fiddle for a demo.

How can I get it to remain at 110% scale until the pointer leaves the text?

+3

Benjamin May 27 '15 at 13:22

2 answers

Can you use JQuery?

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

or maybe

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

-2

ninie1616 May 27 '15 at 13:33

lmgonzalves · Accepted Answer · 2015-05-27T13:30:25+0000

You need to define the 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);
}