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">
    correo@dominio.com
    </span>
  </div>

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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