Efecto aparición de texto con html5 y css3

El siguiente efecto de html5 y css3 que vamos a ver es el efecto transition combinado con transform. Este efecto consiste en que al pasar el cursor por una imagen, aparezca un texto en algún lugar. Da mucho juego probando todas las posibilidades.

Como siempre, primero vamos a pasar a ver el código fuente de nuestro css para luego ir analizándolo poco a poco. Empezamos creando una capa a la que llamamos por ejemplo cae_texto. En este caso, el código del css para la capa podría ser:

div.cae_texto {
    width:900px;
    height:200px;
    font-size:30px;
    font-weight:500;
    line-height:0;
    color:transparent;
    text-transform:uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Bien, como podéis ver le hemos dado una buena dimensión a la capa con el fin de que entren tanto la imagen como el texto a su lado cuando aparezca. También le hemos dado un tamaño y una anchura al texto, y lo nuevo viene ahora:

  • line-height, color, text-transform: con estas tres cosas le hemos dicho que el texto que está dentro de la capa está en el superior de la misma, situado con su parte baja en el superior de la capa y que es transparente, con el fin de que cuando el cursor pase por encima y se cargue el efecto hover, el texto cambie de line-height y de color, para que baje mientras se hace visible.
  • transition: este ya le hemos visto en el otro post, este efecto le está diciendo cuánto tiempo tiene que tardar en cumplirse la orden del hover, en este caso 0.5 segundos.

Una vez claro esto, vamos a seguir con el css del hover que quedaría así para este caso:

div.cae_texto:hover {
    line-height:200px;
    color:#000000;
}

Muy simple esta parte una vez comprendida la anterior, le estamos diciendo con el line-height que la parte inferior del texto tiene que acabar con la parte inferior de la capa, y que el color del texto tiene que variar de transparente que era a negro, con esto causamos el efecto de caída y cambio de color del texto, simulamos una aparición del texto con html5.

Pero no hemos terminado aquí, ya que el texto tiene que aparecer al pasar el ratón por una imagen, no por la capa, por lo que deberemos crear un css para la imagen que contendrá la capa. Un css muy simple en el que únicamente le indicaremos el tamaño de la imagen y su posición, queda:

div.cae_texto img{
    width:200px;
    height:200px;
    float:left;
    margin: 0 15px;
}

Como veis, le hemos puesto un tamaño a la imagen cuadrada con el fin de que coincida su alto con el alto de la capa. La dejamos flotando a la izquierda para que el texto salga a su derecha y le ponemos unos márgenes laterales de 15 pixeles cada uno para que no se junten imagen y texto ni imagen y principio de capa, cuestión de estética…

Por último, aunque es de suponer, dejo el código html para la capa, que simplemente es esa capa que hemos detallado en el css con un párrafo <p> y una imagen <img> dentro:

<div class="cae_texto">
    <img src="ruta_imagen.extensión" />
    <p>Tutorial de www.todocursosonline.es>
</div>

Si quieres ver un ejemplo de este efecto y otros muchos:
Efectos hover con html5 y css3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: