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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->