Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class='row'>
  <div class='col-xs-6'>
    <div class='container-fluid relative' data-underlay='1'>
      <div class='row overlay' data-overlay='1'>
        rappers
      </div>
      <div class='row'>
        <div class='col-xs-6'>
          kanye
        </div>
        <div class='col-xs-6'>
          drake
        </div>
      </div>
      <!-- end of row -->
      <div class='row'>
        <div class='col-xs-6'>
          50
        </div>
        <div class='col-xs-6'>
          lil
        </div>
      </div>
      <!-- end of row -->
    </div>
    <!-- end of cf -->
  </div>
  <!-- end of c-xs-6 -->
  <div class='col-xs-6'>
    <div class='container-fluid relative' data-underlay='2'>
      <div class='row overlay' data-overlay='2'>
        rock bands
      </div>
      <div class='row'>
        <div class='col-xs-6'>
          beatles
        </div>
        <div class='col-xs-6'>
          stones
        </div>
      </div>
      <!-- end of row -->
      <div class='row'>
        <div class='col-xs-6'>
          queen
        </div>
        <div class='col-xs-6'>
          green day
        </div>
      </div>
      <!-- end of row -->
    </div>
    <!-- end of cf -->
  </div>
  <!-- end of c-xs-6 -->
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.score-block {
  height: 100px;
  border: 1px solid black;
}

.score-block[data-hover='true'] {
  background: aliceblue;
}

.relative {
  position: relative;  
}

.overlay {
  position: absolute;
  /* absolute lets us put it on top */
  z-index: 2;
  height: 100%;
  width: 100%;
  display: none;
  background: rgba(200, 200, 200, .8);
  text-align: center;
}

.overlay.in {
  display: block;
}

JavaScript

$('[data-underlay]').each(function() {
  var group = this.dataset.underlay;
  $(this).on('mouseover', function() {
    showAndAddMouseoutListener(group);
  })
})

function showAndAddMouseoutListener(group) {
  $('[data-overlay="' + group + '"]').each(function() {
    $(this).addClass('in');
    $(this).on('mouseout', function() {
      $('[data-overlay="' + group + '"]').each(function() {
        $(this).removeClass('in');
      })
    })
  })
}