Una forma sencilla para insertar texto encima de una imagen, para cualquier proyecto de trabajo web, este es un ejemplo muy simple.
Para confeccionar la estructura HTML usaremos los siguientes elementos:
- header: elemento de ayuda de navegación, donde se coloca el encabezado.
- div: un contenedor de class «caja».
- img: una imagen.
- div: un texto de class «texto1».
- div: un texto de class «texto2»
Siguiendo el anterior html y sin ningún css el resultado sería así.
Una imagen y los dos textos.
Ahora confeccionamos la estructura CSS para poder lograr poner el texto sobre la imagen.
- contenedor «caja»: le aplicamos una posición relativa, esto es, el punto de referencia es la esquina superior izquierda de su elemento. inline-block los elementos con este estilo se ponen horizontalmente y respeta el ancho y altura (width, height) esté es el estilo por defecto de las imágenes.
- texto1: le aplicamos una posición absoluta, el punto de referencia para medir el desplazamiento está en la ventana del navegador. Así con los márgenes superior e izquierda posicionamos el texto1. top 10px y left 10% los valores pueden ser de medida o de porcentaje, una clase de letra, color y tamaño.
- texto2: le aplicamos también una posición absoluta, altura y margen, en este caso todo en porcentajes, un color y tamaño de la fuente.
El resultado es texto1 «Playa de las Catedrales» en la parte superior izquierda y el texto2 «Lugo-Galicia» en la parte inferior derecha de la imagen.
Terminando de empezar 
No me resulta, pues para aplicarlo a varias fotos (haciendo use de flex grid), y al hacer responsiva la pagina, queda un caos.
Me gustaMe gusta
Bueno, esto es una manera hay otras, tienes que jugar con los márgenes
Me gustaMe gusta