¿ Cómo colocar texto encima de una imagen con CSS pensando en Iguazú?

¿ Cómo colocar texto encima de una imagen con CSS pensando en Iguazú?

1.Crear la estructura

A. Un DIV contenedor con clase ‘iguazu’
B. Una imagen
C. Un DIV de texto con clase ‘viajaras-iguazu’

Es decir se verá algo así:

<div class=”iguazu”>
<img src=”URL DE IMAGEN” />
<div class=”viajaras-iguazu”>Iguazú</div>

</div>

2.Estilos CSS

.iguazu {
position: relative;
display: inline-block;
text-align: center;
}

.viajaras-iguazu {
position: absolute;
top: 24%;
width: 100%;
text-align: center;
color: white;
font-size: 8vw;
text-shadow: 2px 2px black;
}

3.Explicación

En pocas palabras lo importante es colocar el contenedor con posición relativa y los textos o elementos que van adentro de la imagen en forma absoluta. Ya con eso se pueden colocar los textos por encima y darles los estilos que se deseen.

Resultado: El soñado viaje a Iguazú:

iguazu

IGUAZÚ
Compartir:

Leave a Reply

Your email address will not be published.