css3 Aumentar Texto ao Passar o Mouse

joelandy14 · 22/02/2013

Hola estoy implementando un poco de css3 (creo) a un sitio web, que al pasar el cursor el texto se agranda pero el problema es al agrandarse se vuelve borroso y despues se aclara, quiero que al agrandarse se muestre nitido en todo momento.

como esta web:
http://livedemo00.template-help.com/wt_41059/index.html

fijense en la letras de
"ABOUT" "BOUILDING"...

Alguien me puede ayudar?

PD. dejo algunos datos haber si les sirve de algo.

esto va en el css

Inserir CODE, HTML ou PHP:

.zoomIt{
display:block!important;
-webkit-transition:-webkit-transform 0.5s ease-out;
-moz-transition:-moz-transform 0.5s ease-out;
-o-transition:-o-transform 0.5s ease-out;
-ms-transition:-ms-transform 0.5s ease-out;
transition:transform 0.5s ease-out;
}
.zoomIt:hover{
-moz-transform: scale(2.2);
-webkit-transform: scale(2.2);
-o-transform: scale(2.2);
-ms-transform: scale(2.2);
transform: scale(2.2)
}

en el html:

Inserir CODE, HTML ou PHP:

    <a class='zoomIt' href='http://www.google.com'>Texto que agrada!</a>

LuisLopez · 22/02/2013

Yo no soy experto en css ni nada de eso pero una vez aplique ese truco jugando con el css de los links, aumentando el tamaño y color de las letras. Con eso quedo como en el efecto.

Puchi · 22/02/2013

Te doy un ejemplo con un párrafo dentro de H1, espero que te sirva

h1{

font-family: Helvetica, Arial;
font-size: 26px;
text-align: center;
}

Entonces

h1 p:hover{
font-size: 30px;
text-decoration:underline;

}

Así hago yo para agrandar texto

neburor · 23/02/2013

para el mismo efecto de agrandar y cambiar de color en transicion, puedes utilizar algun plugin en jQuery, ya lo he visto pero no recuerdo el nombre del plugin

HeroeGeek · 23/02/2013

lo que Puchi dice es la solucion mas facil, antes de meter tanta mano en css3 o algo por estilo, aparte no se te va a distorsionar pues no trata las letras como imagen, creo que en css3+html5 esto es lo que sucede, alguien me corrija si me equivoco, lo mas fácil la sentencia que usas le ponga la condición over y ahí cambies el tamaño de la letra. Cito a Puchi

h1{

font-family: Helvetica, Arial;
font-size: 26px;
}

Entonces

h1 p:hover{
font-size: 30px;

}

lo de text decoration y color y esas cosas es al gusto del cliente xD

css3 Aumentar Texto ao Passar o Mouse

joelandy14

LuisLopez

Puchi

neburor

HeroeGeek

Tópicos similares