CODEWITHSUNDEEP
htmlcsscss-animations
SJW
SJW

Reputation: 75

CSS3 Scale animation resets

The CSS3 transition resets right away even though I'm still hovering it. Can anyone help me make this permanent and not reset while the mouse is hovering over it?

.grow {
  -webkit-transition: all .2s ease-in-out;
}
.grow:hover {
  -webkit-transform: scale(1.1);
}
<a class="logo-icon grow" href="#">
  <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="logo">
</a>

Upvotes: 2

Views: 450

Answers (1)

blex
blex

Reputation: 25634

Your link is screwing it up, because it is display: inline.

.grow { 
    -webkit-transition: all .2s ease-in-out;
    display: block; /* or display: inline-block; */
}

.grow:hover { 
    -webkit-transform: scale(1.1);
}
<a class="logo-icon grow" href="#">
  <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="logo">
</a>

But why?

Inline elements do not expand to their content's height. Block elements do: enter image description here

Upvotes: 3

Related Questions