2

¿Cómo pongo un texto sobre una imagen responsive, que cuando la imagen se adapte a un tamaño más pequeño el texto también?

Mi código es el siguiente:

/* Container holding the image and the text */
.container {
	display: block;
	position: relative;		
}

/* Bottom right text */
.text-block {
	display: block;
	position: absolute;
	bottom: 50px;
	right:100px;
	padding-left: 20px;
	padding-right: 20px;
}
h10 {
	color: black;
	font: bold 16px/36px Helvetica, Sans-Serif;
	letter-spacing: -1px;
}
pp {
	color: white;
	font: bold 24px/45px Helvetica, Sans-Serif;
	letter-spacing: -1px;
}
<div class="container">
	<a href="enviar.php" class="image featured">
		<img src="https://2.bp.blogspot.com/-6lLUfA4Jkig/Txk6NnOEF7I/AAAAAAAAACU/qLspTGYpRn4/s1600/imagen+original.JPG" alt="Norway" style="width:100%;" />
	</a> 
	<div class="text-block"> 
		<h10>Texto que quiero que se mueva.</h10>
	</div>
</div>

2 respuestas 2

2

Hola amigo hay varios metodos los mas seguros serian usar las medidas de la letra en base al (view port) units.

 .texto p {
   font-size: 3.5vw;
 }

O puedes usar la media de pantallas para definir el texto a medida que la pantalla se reduzca o expanda.

@media only screen and (max-width:300px){
  font-size: {12px}
}

Espero que te sirva

0
1

Espero Ayudar!

.textoC {
    display: block;
    position: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #000;
    font-family: Helvetica;
    font-size: 1.5em;
}
img {
    width: 100%;
}
    <div class="text-block" style="
    position: absolute;
">
   <img src="https://images.pexels.com/photos/374780/pexels-photo-374780.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
><span class="textoC">
    [email protected]
    </span>
  </div>

1
  • 2
    poner respuestas que son solo código se considera de baja calidad, agrega una explicación
    – user75901
    Commented el 1 nov. 2018 a las 2:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.