在图像响应时引导文本

Question

I have this markup. I am driving crazy, I really don't know how to do it. I was trying with a wrapper and an overlay but does´t work. It have to be responsive, the image and the text too. Any help please. Thanks!

Here is my markup and css:

<div class="franja_blanca ">
<div class="container">
<div class="wrapper">
<div class="header-img">
<img class="img-responsive" src="../header/818.png" alt="">
</div>
<div class="overlay">
<div class="texto_naturopatia">
Here is my text 1</div>
</div>
</div>
</div>
</div>

.header-img{
    text-align:center;
    background-color:#fff;
    display:inline-block;
}

.header-img img {
 display:inline-block;
}



.wrapper {
    display: inline-block;
    position: relative;
}


.wrapper .overlay {
    color: #333333;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.wrapper .overlay {
    color: #333333;
}




.franja_blanca {
    text-align:center;
    height: 100px;
    background-color:#fff;
}

Answer 1

Hey i made some coding for you,
hope it helps!
Here is the demo link: https://jsfiddle.net/j5rc1eyL/2/

<div class="position">
<div class="greybg">
    <p> HERE IS TEXT 2 HERE IS TEXT 2</p>
</div>
<div class="imagebox">
    <p>IMAGE
    <br>
    <br>
    <br>
    HERE IS TEXT 1 HERE IS TEXT 1
    </p>

</div>
</div>

.imagebox{
    max-width:300px;
    margin:auto;
    padding: 5px;
    background-color:#0F1955;
    text-align:center;
    color:white;
    font-size:14px;
    box-shadow: 2px 2px 5px black;
}

.greybg {
    background-color: #575756;
    color: #FFF;
    padding: 50px 0px 5px;
    text-align: center;
    margin-bottom: -155px;
}

.position {
    margin-top:70px
}