CODEWITHSUNDEEP
javascriptjquery
Eike Cochu
Eike Cochu

Reputation: 3429

JQuery: zoom text on hover

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

Upvotes: 5

Views: 7753

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

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>

Upvotes: 5

Varon
Varon

Reputation: 3916

The align in horizontal center is easy. Just add text-align: center and it will work. But if you want to align it in middle, you need to use display: table, because "only" td is "allowed" to set vertical-align: middle. So you have to build a div-table layout around: http://jsbin.com/welcome/48145/edit

Upvotes: 1

Related Questions