Skip to main content
Mejorando gramática y formato. Cambiando título y etiquetas. Indentando código. Agregando imagen de ejemplo.
Origen Enlace
user13558
user13558

Como pongo ¿Cómo achicar un texto sobrejunto a una imagen responsive, que cuando la imagen se adapte a un tamaño mas pequeño el texto tambien m en CSS?

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

mi codigoMi 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;
 
 
}
/* CSS Document */
<div class="container">
    <a href="enviar.php" class="image featured"><imgfeatured">
 src="images       <img src="https:/cualquiera/2.jpgbp.blogspot.com/-6lLUfA4Jkig/Txk6NnOEF7I/AAAAAAAAACU/qLspTGYpRn4/s1600/imagen+original.JPG" alt="Norway" style="width:100%;" /><>
    </a> 
    <div class="text-block"> 
    <h10>texto    <h10>Texto que quiero que se mueva<mueva.</h10>
    </div>
</div>

Como pongo un texto sobre una imagen responsive, que cuando la imagen se adapte a un tamaño mas pequeño el texto tambien m

Como pongo un texto sobre una imagen responsive, que cuando la imagen se adapte a un tamaño mas pequeño el texto tambien

mi codigo 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;
 
 
}
/* CSS Document */
<div class="container">
  <a href="enviar.php" class="image featured"><img src="images/cualquiera.jpg alt="Norway" style="width:100%;" /></a> 
  <div class="text-block"> 
    <h10>texto que quiero que se mueva</h10>
</div>
</div>

¿Cómo achicar un texto junto a una imagen responsive en CSS?

¿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>

Origen Enlace

Como pongo un texto sobre una imagen responsive, que cuando la imagen se adapte a un tamaño mas pequeño el texto tambien m

Como pongo un texto sobre una imagen responsive, que cuando la imagen se adapte a un tamaño mas pequeño el texto tambien

mi codigo 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;

 
}
/* CSS Document */
<div class="container">
  <a href="enviar.php" class="image featured"><img src="images/cualquiera.jpg alt="Norway" style="width:100%;" /></a> 
  <div class="text-block"> 
    <h10>texto que quiero que se mueva</h10>
</div>
</div>