html - Positioning a box below an image background -

i got image , box working accordingly far. problem is, when go add height, goes instead of down.

my fiddle - https://jsfiddle.net/kg6plk4e/

.post {      height: 255px;      font-size: 14px;      position: relative;      padding: 5px;      margin-right: 3%;      margin-top: 3%;  }  .box-one {      background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");      background-repeat: no-repeat;      background-size: cover;  }  .image-text {      position: absolute;      width: 100%;      margin: 0;      left: 0;      font-weight: bold;      color: white;      text-align: center;      background: black;      bottom: 0;      padding: 5px;      height: 40px;  }

<div class="late-post grid-60 tablet-grid-50 mobile-grid-100">      <div class="post box-one">                                                            <h1>pottery</h1>          <p class="image-text">lorem ipsum dummy text of printing and</p>                                                        </div>  </div>

basically, want add content inside image-text rather box go up, want go down. here's i'm talking about:

note: white box going covering image. don't want cover image. want white box go down instead of adjusted height.

for known height, edit bottom value match container's height.

.image-text {     bottom: -40px;     height: 40px; } 

.post {      height: 100px;      width: 500px;      font-size: 14px;      position: relative;      /* padding: 5px; */      /* margin-right: 3%; */      /* margin-top: 3%; */  }  .box-one {      background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");      background-repeat: no-repeat;      background-size: cover;      /* outline: 5px solid blue; */  }  .image-text {      position: absolute;      left: 0;      bottom: -40px;      width: 100%;      margin: 0;      font-weight: bold;      color: white;      text-align: center;      background: black;      /* opacity: .5; */      /* padding: 5px; */      height: 40px;      line-height: 40px;  }

<div class="post box-one">      <h1>pottery</h1>      <p class="image-text">lorem ipsum dummy text of printing and</p>  </div>

if it's unknown height, can use transform property.

.image-text {     bottom: 0;     transform: translatey(100%); } 

.post {      height: 100px;      width: 500px;      font-size: 14px;      position: relative;      /* padding: 5px; */      /* margin-right: 3%; */      /* margin-top: 3%; */  }  .box-one {      background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");      background-repeat: no-repeat;      background-size: cover;      /* outline: 5px solid blue; */  }  .image-text {      position: absolute;      left: 0;      bottom: 0;      width: 100%;      margin: 0;      font-weight: bold;      color: white;      text-align: center;      background: black;      /* opacity: .5; */      padding: 10px 0;      /* height: 40px; */      -webkit-transform: translatey(100%);      -ms-transform: translatey(100%);      transform: translatey(100%);  }

<div class="post box-one">      <h1>pottery</h1>      <p class="image-text">lorem ipsum dummy text of printing and</p>  </div>