CSS transform transition on hover snaps back to default size

Question

I have a selector to have an item change color on hover and scale up 1.2.

It works, but as soon as it scales up to 1.2, it just snaps back to 1.0, even when still hovered:

.reveal a:not(.image) {
  color: #13daec;
  text-decoration: none;
  -webkit-transition: color .15s ease, transform 0.3s ease-out;
  transition: color .15s ease, transform 0.3s ease-out;

}

.reveal a:not(.image):hover {
  color: #71e9f4;
  text-shadow: none;
  border: none;
  -webkit-transform: scale(1.2, 1.2);
}

Note: in this case I am only really concerned with Chrome and Safari support.

Answer 1

Add display: inline-block to your style definition for .reveal a:not(.image) and it should work.