Efecto caption a Imágenes con CSS3

Muchas veces queremos mostrar cierta información asociada a algún grafico o imagen, y la mejor opción es utilizar la técnica Caption, esta nos permitirá hacer la descripción, hacer algún tipo de referencia o simplemente agregar algunos títulos. Con CSS Y algunas características de CSS3 podemos hacer esta experiencia un poco mas animada e interactiva, en este tutorial veremos como hacer un efecto caption a nuestras imágenes, que podemos utilizar para mostrar en nuestro portafolio, mostrar productos etc..

caption-css3

Ver Demostración

ok, vamos a comenzar.

EL HTML

El código HTML es básico y fácil de entender, tenemos una lista <ul> asociada a dos clases dentro tenemos los respectivos <li> dentro tenemos la etiqueta <figure> de html5 que es la encargada de contener todo el contenido a mostrar, después tenemos un <div> y dentro de el mostramos la imagen <img>, aparte tenemos la etiqueta <figcaption> donde mostraremos la información adicional es decir el caption, dentro de el tenemos un titulo en <h3> un <span> para mostrar el texto y un enlace <a>. Esto es básicamente todo, claro aun falta los CSS.

caption-css-parte-html

LOS CSS

los anteriores fueron los del contenedor principal, es decir la <ul> y el/los <li>, le damos las proporciones y dimensiones en las que se van mostrar, los <li> que al final será cada imagen la mostramos con display: inline-block por si tenemos muchas se ubicaran una al lado de la otra, con un ancho de 363px para que encajen de a tres por líneas en caso de tener varias.

Aplicamos los estilos de cada elemento que compone el ítem, es decir, la etiqueta figure, la imagen, la etiqueta  figcaption el texto que está dentro de un span, el h3 y el enlace, estos son estilos para que se vean bien y para posicionarlos, hasta ahora esto es lo que vemos.

proceso-caption-css3

aplicamos un poco de perspectiva con la propiedad perspective y perspective-origin, con esto determinamos la intensidad del efecto 3d y cambiar la posición de origen interior del elemento que tendrá efecto 3d.

Básicamente le decimos al navegador que estamos trabajando con características 3d y por ahora ocultamos el div que tenemos dentro de figure

Aplicamos animación a la imagen dentro del item, le decimos que se mueva 23% de su ubicación en el eje x con la propiedad translateX, esta se moverá de izquierda a derecha y tendrá una transición que aplicamos con la propiedad transition.

Ajustamos la altura al 100% de nuestro caption y lo dejamos invisible con la propiedad opacity en 0, con backface-visibility: hidden nos aseguramos que al momento de girar el elemento en efecto 3d la otra cara del elemento quede oculta ya que lo estamos rotundo -90 grados y en su punto de origen lo dejamos en 0 0. Luego en el estado hover, es decir cuando situé el mouse sobre el lo hacemos totalmente visible cambiando su opacidad, cambiamos la rotación y aplicamos la transición  a todos los cambios para dar la sensación de movimiento.

Y finalmente aplicamos los estilos al enlace que esta dentro del figcaption que al final será un boton que tendrá un enlace, lo posicionamos absolutamente y aplicamos estilos de background y transicion en el estado hover.

Y eso es todos, tenemos listo nuestro efecto caption con css3 para utilizar en proyectos, para mostrar nuestro portafolio personal, mostrar información de productos etc.

Espero que este ejercicio y tutorial te sirva para algo. Nos vemos en otro tutosytips.

Ver Demostración

Descargar ejercicio

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

2 Respuestas

  1. Gabriel dice:

    muy bueno, estoy buscando algo parecido tmb en css3

  1. enero 16, 2014

    muy bueno, estoy buscando algo parecido tmb en css3