How make text follow image resize

Question

I'm having trouble making a layout that was asked me.

I have this image that needs resize, and I need to make the texts that are on top of it follow the image resize.

For example:

There is a word that is in the left of the face of a women, when I resize the window the image changes, but the text is still static.. in the same place.

To illustrate my problem I created a codepen: http://codepen.io/anon/pen/MwoJNb?editors=110

In the first 'hero', the picture has a text and a line and when you resize, you can see that the text follows the line.

In the second 'hero', the image only has the line and the text is HTML, when you resize the line moves, but the text stay in the same place

I want make the same behavior happened in the second, but using text, possible?

thanks! :)

<div class="hero"></div>
<div class="hero2">
  <h1 class="hero2__text">Text<h1>
</div>

* {
  padding: 0px;
  margin: 0px;
}
.hero {
  background-image: url('http://i.imgur.com/2ZxJ9UY.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero {
  background-image: url('http://i.imgur.com/2ZxJ9UY.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero2 {
  margin-top: 50px;
  background-image: url('http://i.imgur.com/aD6yIXf.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  width: 100%;
  height: 400px;
  display: block;
}
.hero2__text {
  color: white;
  position: relative;
  top: 120px;
  left: 160px;
}

Answer 1

I think something like this fiddle: https://jsfiddle.net/1xqbk25v/ in combination with http://fittextjs.com/ might work out for you.

The relevant code for aligning the text vertically with the image is this:

.hero2 {
    position: relative;
}
.hero2__text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px;
}
.img {
    overflow: hidden;
    margin-left: 100px;
}