How to properly position divs for overlay hover effect with text underneath

Question

I have two rows of 4-boxed divs. The goal is to have a header within each box, and then hovering over the box will present more detailed p text with a faded background. I'm close, I just can't figure out how to actually layer the span overlay on top of the div instead of it being padded out of the way. Any help would be hugely appreciated!

.box {
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}

<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

Answer 1

Check the code below should be what your after.

---

They key here is positioning.

What you want is a box that overlays its container and has text in the dead center.

In these instances position:absolute & position:relative mean everything.

A small understanding of relativity would help in this situation but until you crack open a copy of the theory of relativity you can have this.

Your container will be relatively positioned. this means it is positioned relatively to the content surrounding it. But it also has a second cascaded function.

It tell's an absolutely positioned element to behave Absolutely relative to its container.

so when this happens we can use top,bottom,left & right to control where it should sit in the container absolutely.

so what we want to happen is for your text to sit dead center so in this case we tell it to have top,left,bottom & right 0px & margin:auto;

This will tell your element that it is not taking positioning rules from any one point of your container and it wants its marginalizing to be automatically thought out, but since you have defined all the axis that it can be positioned from it will margin it to the center.

Hope it help's you understand a little on why this happens.

---

.box {
  position: relative;
  width: 200px;
  float: left;
  box-shadow: inset 1px 1px 40px 0 rgba(90, 90, 90, .25);
  margin: 5% auto 0 auto;
  background-color: #DE5D40;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}
.overlay {
  top: 0px;
  left: 0px;
  position: absolute;
  background: rgba(0, 0, 0, .75);
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  z-index: 10;
  width:100%;
  height:inherit;
}
.box:hover .overlay {
  opacity: 1;
}
.overlayText {
  position: absolute;
  margin: auto;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  font-family: Helvetica;
  font-weight: 14;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  height:15px;
}
.one-fourth.box {
  margin-bottom: 20px;
  height: 130px;
}
/* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}
.one-third,
.two-sixths {
  width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}
.one-fourth {
  width: 23.076923076923077%;
}
.three-fourths {
  width: 74.35897435897436%;
}
.one-sixth {
  width: 14.52991452991453%;
}
.five-sixths {
  width: 82.90598290598291%;
}
.first {
  clear: both;
  margin-left: 0;
}

<div class="one-fourth first box box1">
  <h3>SEO</h3>
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box2">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box3">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box4">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

<div class="one-fourth first box box5">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box6">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box7">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>
<div class="one-fourth box box8">
  <div class="overlay">
    <span class="overlayText">SEO</span>
  </div>
</div>

Answer 2

Do this:

.box {
  position:relative;
}
.overlay {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

Answer 3

If i understand your problem correctly you need to use position:absolute for your .overlay div to position it on top of your .box div. You can try this:

    .box { position: relative}
    .overlay{position:absolute;
             top:0px;
             left:0px}