Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje03-12-2013, 18:52 (UTC)    
Título del mensaje: Efecto "Fade Text in"

Este efecto es bastante interesante, es un div que contiene una imagen y un texto, se le definen las propiedades para que cuando el cursor pase por la imagen, esto cambie de manera animada, dando el efecto que el texto cae.

Primero Utilizaremos el siguiente codigo HTML donde pondremos la imagen y el texto:
Cita:
<div id="ex3">
<img src="URL DE LA IMAGEN"><p>TEXTO</p>
</div>


Una vez que hayamos modificado el texto debemos utilizar el siguiente codigo CSS:
Código:
#ex3 {
    width: 730px;
    height: 133px;
    line-height: 0px;
    color: transparent;
    font-size: 50px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#ex3:hover {
    line-height: 133px;
    color: #575858;
}
 
#ex3 img{
    float: left;
    margin: 0 15px;
}


Si lo van a poner en Texto por encima de la pagina o en algun lugar donde que no sea "CSS Code sin Style Tags" deberan utilizar el siguiente codigo con las propiedades <style> y </style>
Código:
<style>#ex3 {
    width: 730px;
    height: 133px;
    line-height: 0px;
    color: transparent;
    font-size: 50px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-weight: 300;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
#ex3:hover {
    line-height: 133px;
    color: #575858;
}
 
#ex3 img{
    float: left;
    margin: 0 15px;
}</style>


Ejemplo:



------
- ¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Lun Ago 24, 2015 5:01 pm; editado 3 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group