<div class = "nav">
    <div class = "container">

        <div class = "image">
            <img src = "img1">
        </div>
        <div class = "title">
            <p> text1 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img2">
        </div>
        <div class = "title">
            <p> text2 </p>
        </div>

    </div>

     <div class = "container">

        <div class = "image">
            <img src = "img3">
        </div>
        <div class = "title">
            <p> text3 </p>
        </div>

    </div>
</div>

.nav {
    display: inline;
}

.container {
    position: relative;
    width: 100%;
}

.image img {
    width: 30%;
    height: 4.5in;
}

.title {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

.container {
    float:left;
    position: relative;
    width: 30%;
}

.imgage{
    float:left;
}

.image img {
    width: 100%;
    height: 4.5in;
    }

container { display: inline-block }

<div class = "title>
        <p> text3 </p>
    </div>

<h1 class="title">text3</h1>

.container h1 {
    width: 30%;
    position: absolute;
    bottom: 0; left: 0;
}

<h1>text3</h1>