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;
}
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;
}
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
Soporte PWG: 