/ / ¿Podemos dar subtítulos a las imágenes solo usando CSS? - html, css, imagen, título

¿Podemos dar subtítulos a las imágenes solo con CSS? - html, css, imagen, título

Quiero dar subtítulos a las imágenes. Hay dos opciones que encuentro.

  1. Por jQuery
  2. Por solo CSS

Creo que la segunda es la mejor manera de hacerlo.

Creo que Airnb lo está haciendo de la segunda manera.

pero no pude resolverlo usando firebug.

¿Me puede dar un ejemplo simple o cualquier enlace útil de blog para el mismo.

Respuestas

1 para la respuesta № 1

Existe la opción 3) A través de HTML (y CSS). ¿Por qué no simplemente agregar un título en el HTML?

Pero para responder a tu pregunta, si quieres hacerlo en CSS, puedes usar algo como esto:

img {
margin-bottom: 50px; /* Make room */
}

img:after {
content: "The caption of the image";
display: block;
position: absolute;
top: 100%;
}

Aún necesitará un contenedor para que el posicionamiento funcione. Y puedo imaginar que el texto del subtítulo no debería estar realmente en CSS, por lo que una solución CSS pura no es ideal.