All geek questions in one place

JQuery: scale text on hover

I want to enlarge / delete text using animation. The problem is that the text is absolutely placed inside the relative div, and when I change the font size, the text expands only to the right and bottom. I want it to expand / retract in all directions equally.

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

+4
source share
2 answers

Demo

<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a> 
 .zoom { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .zoom:hover { -webkit-transform: scale(1.4); transform: scale(1.4); }
+4
source

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

+1
source

Source: https://habr.com/ru/post/1445800/

More articles:


All Articles