css3 Agrandar Texto al Pasar al Mouse

joelandy14

VIP

Iota

Verificado

Verificación en dos pasos activada

Suscripción a IA

• 22 Feb 2013

• #1

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

Insertar CODE, HTML o 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:

Insertar CODE, HTML o PHP:

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

 

Última edición: 22 Feb 2013

LuisLopez

Préstamo

Zeta

Redactor

Verificación en dos pasos activada

Verificado por Whatsapp

• 22 Feb 2013

• #2

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.

 

P

Puchi

Zeta

Diseñador

• 22 Feb 2013

• #3

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

 

N

neburor

Dseda

• 23 Feb 2013

• #4

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

Gamma

Verificado

Verificación en dos pasos activada

Verificado por Whatsapp

Verificado por Binance

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 23 Feb 2013

• #5

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