Insertar etiquetas en imágenes con CSS (sin JavaScript)

Label.css es una hoja de estilo muy simple para agregar etiquetas a imágenes de forma rápida y sin la necesidad de utilizar JavaScript, una solución que utiliza pura y exclusivamente CSS.

La idea detrás de este proyecto es clara, utilizar CSS y etiquetas HTML básicas para agregar una etiqueta con texto a cualquier imagen, permitiendo realizar cambios simples como por ejemplo, cambiar el color del texto, el tamaño de la tipografía y la ubicación de la leyenda.

La forma de utilizar este proyecto es agregar la hoja de estilo label.css (que viene en su versión comprimida, SASS y LESS) a nuestro sitio, luego utilizamos la etiqueta figure de la siguiente forma:

<figure class="label inside bottom" data-label="Ejemplo de etiqueta.">

Como se puede ver en el ejemplo, con la clase definimos el elemento y su ubicación y con data-label el texto.

También Label.css nos brinda la posibilidad de insertar una etiqueta con un pequeño efecto, muy bien logrado y que utiliza solo hojas de estilo. El efecto en concreto es del tipo fade-in, para obtenerlo simplemente escribimos:

<figure class="label inside bottom fade" data-label="Ejemplo de animación.">

Label.css es una solución simple y que no tiene requerimientos mínimos, tan solo que el navegador soporte las propiedades CSS modernas.

Web: Label.css