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-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='1'>
    <p class="name">Kanye</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='1'>
    <p class="name">Drake</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock"  data-hover-group='2'>
    <p class="name">The Beatles</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock"  data-hover-group='2'>
    <p class="name">The Rolling Stones</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='1'>
    <p class="name">50 Cent</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='1'>
    <p class="name">Wayne</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock"  data-hover-group='2'>
    <p class="name">Queen</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock"  data-hover-group='2'>
    <p class="name">Green Day</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='3'>
    <p class="name">Kanye</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='3'>
    <p class="name">Drake</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock" data-hover-group='4'>
    <p class="name">The Beatles</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock" data-hover-group='4'>
    <p class="name">The Rolling Stones</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='3'>
    <p class="name">50 Cent</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rapper" data-hover-group='3'>
    <p class="name">Wayne</p>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3 score-block rock" data-hover-group='4'>
    <p class="name">Queen</p>
  </div>
  <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;
}
.name {
  text-align: center;
  padding-top: 40px;
  display:none;
}

.score-block[data-hover='true'] .name{
  text-align: center;
  padding-top: 40px;
  display:inline-block;
}

JavaScript

$('[data-hover-group]').each(function(){
  var group_num = this.dataset.hoverGroup;
  $(this).on('mouseover', function(e){
    $('[data-hover-group="'+group_num+'"]').each(function(){
      console.log(this);
      this.dataset.hover = 'true';
    })
  })
  $(this).on('mouseout', function(e){
    $('[data-hover-group="'+group_num+'"]').each(function(){
      console.log(this);
      this.dataset.hover = 'false';
    })
  })
})