Question

I want to zoom/unzoom a text with animate. The problem is that the text is absolutely positioned inside a relative div and when I animate the font-size the text expands only to the right and bottom. I want it to expand/retract to all sides equally.

Prepared example: http://jsbin.com/welcome/48103/edit

Answer 1

Animate using the CSS transition property:

.zoom {
  display: inline-block; /* this is needed for inline elements */
  transition: transform 0.3s ease-in-out;
}

.zoom:hover {
  transform: scale(1.4);
}

<a class="zoom" href='#'>Hover me!</a>