Overlay individual Div's

Question

I am trying to put a overlay on top of a div on my page if they are not subscribers with a button to subscribe to the site in the center of it. I am having issues getting the overlay to get onto the right div and not be inside of it.. but to grey it all out...

Have Actual CSS of span5 and well from console at end of post

I have a page with the following HTML:

  <div class="row-fluid">
    <div class="span2 well>
      ...
    </div>
    <div class="span5 well">
      <h3>EZ Search</h3>
      <a class="btn btn-primary" href="/searches/new">Advanced Search</a>
      <hr/>
      <%= render partial: "searches/ezsearch", locals: {search: @search, user_id: current_user.id} %>
    </div>
    <div class="span5 well>
      ...
    </div>
  </div>

Here is the image of the page as i have it now:

and want it to look kinda like this:

this is what i have in my css:

.overlay{
  z-index: 20;
  width: 100%;
  height: 100%;
  position: absolute;
}

.overlay .blackbg {
  z-index: 25;
  color: #000;
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.overlay .button {
  z-index: 30;
  color: white;
}

Here is the css of span5 and well

.row-fluid .span5 {
    width: 40.1709%;
}
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.5641%;
    min-height: 30px;
    width: 100%;
}
.row-fluid .span5 {
    width: 40.4255%;
}
.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.12766%;
    min-height: 30px;
    width: 100%;
}
.well {
    background: none repeat scroll 0 0 #E6E6E6;
    box-shadow: 3px 3px 5px 6px #CCCCCC;
}
.span5 {
    width: 470px;
}
[class*="span"] {
    float: left;
    margin-left: 30px;
    min-height: 1px;
}
.well {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 19px;
}
.span5 {
    width: 380px;
}
[class*="span"] {
    float: left;
    margin-left: 20px;
    min-height: 1px;
}

Answer 1

You can simplify your overlay styles like so:

.overlay{
  z-index: 20;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5); /* this will give you the 50% black background without the extra element */
  color: #000;
}

.overlay .button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* object is aligned centered based on the top left corner, this adjusts it to true center */
  z-index: 30;
  color: white;
}

And here is the slightly adjusted HTML:

<div class="span5 well">
    <div class="overlay">
        <a class="btn btn-primary button" href="/searches/new">Sign Up Now!</a>
    </div>
  <h3>EZ Search</h3>
  <a class="btn btn-primary" href="/searches/new">Advanced Search</a>
  <hr/>
    <p>...</p>
</div>

JSFiddle Demo