How do I put a text on a responsive image, that when the image adapts to a smaller size the text also m

Question

How do I put a text on a responsive image, that when the image adapts to a smaller size the text also m

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

As I put a text on a responsive image, when the image adapts to a smaller size the text also

my code is as follows:

			/* 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>

html ccs

asked by Nico Di Remigio 01.11.2018 в 02:36

source

2 answers

Given 2 lists generate 2 new lists with the elements that are in both and with those that are only in one React - dynamic child component

score 1 · Answer 1

Hello friend there are several methods the safest would be to use the measurements of the letter based on (view port) units.

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

Or you can use the average screens to define the text as the screen shrinks or expands.

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

I hope it serves you

score 0 · Answer 2

I hope to help!

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