CodePen

HTML

            
              <h1>2016 Potential Presidential Candidates</h1>
<section class="candidates-container">
  <ul class="Republican Party">
    <li data-candidate="Chris Christie"></li>
    <li data-candidate="Marco Rubio"></li>
    <li data-candidate="Paul Ryan"></li>
    <li data-candidate="Rand Paul"></li>
    
  </ul>
  <ul class="Democratic Party">
    <li data-candidate="Hillary Clinton"></li>
    <li data-candidate="Joe Biden"></li>
    <li data-candidate="Deval Patrick"></li>
    <li data-candidate="Martin O'Malley"></li>
    
  </ul>
  
  
</section>
            
          
!

CSS

            
              * { margin: 0; padding: 0; box-sizing: border-box; vertical-align: middle; }

html, body { height: 100%; }
body {
  font: 100%/1.4 "Oranienbaum";
  text-align: center;
  background: whitesmoke;
  padding: 1.5rem;
}

h1 {
  display: inline-block;
  font-weight: normal;
  border-bottom: thin solid black; }

.candidates-container {
  display: flex;
  min-height: 10rem;
}

.Party {
  flex: 1;
  padding: .875rem;
  
  &:before {
    display: block;
    font-size: 1.2rem;
    margin-bottom: .5rem;
    content: attr(class);  
  }
}

.Republican {
  text-align: right;
  border-right: thin solid lightgray;

  [data-candidate] {
    background-color: lighten(red, 20%);
    float: right;
  }  
}

.Democratic {
  text-align: left;  

  [data-candidate] {
    background-color: lighten(blue, 25%);
    float: left;
  }  
}

$size: 7rem;
[data-candidate] {
  border-radius: .25s;
  cursor: pointer;
  position: relative;
  width: $size;
  height: $size;
  margin: .125rem;
  list-style: none;
  background-size: cover;
  background-position-x: center;
  background-blend-mode: multiply;
  transition: background-color .5s;
  
  &:hover {
    background-color: white;
    transition: background-color .25s;
  }
}

[data-candidate="Chris Christie"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Chris_Christie_at_townhall.jpg/195px-Chris_Christie_at_townhall.jpg); }

[data-candidate="Paul Ryan"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Paul_Ryan--113th_Congress--.png/199px-Paul_Ryan--113th_Congress--.png); }

[data-candidate="Marco Rubio"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Marco_Rubio%2C_Official_Portrait%2C_112th_Congress.jpg/189px-Marco_Rubio%2C_Official_Portrait%2C_112th_Congress.jpg); }

[data-candidate="Paul Ryan"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Paul_Ryan--113th_Congress--.png/199px-Paul_Ryan--113th_Congress--.png); background-position-y: -.5rem; }

[data-candidate="Rand Paul"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Rand_Paul%2C_official_portrait%2C_112th_Congress_alternate.jpg/189px-Rand_Paul%2C_official_portrait%2C_112th_Congress_alternate.jpg); }

[data-candidate="Ted Cruz"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Ted_Cruz%2C_official_portrait%2C_113th_Congress.jpg/192px-Ted_Cruz%2C_official_portrait%2C_113th_Congress.jpg); }






[data-candidate="Hillary Clinton"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Hillary_Clinton_official_Secretary_of_State_portrait_crop.jpg/192px-Hillary_Clinton_official_Secretary_of_State_portrait_crop.jpg); }

[data-candidate="Joe Biden"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Biden_2013.jpg/192px-Biden_2013.jpg); }

[data-candidate="Andrew Cuomo"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Andrew_Cuomo_by_Pat_Arnow_cropped.jpeg/194px-Andrew_Cuomo_by_Pat_Arnow_cropped.jpeg); }

[data-candidate="Martin O'Malley"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/5/55/O%27Malley-Portrait-2013.jpg); background-size: 80%; }

[data-candidate="Deval Patrick"] { background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Official_portrait_of_Deval_Patrick.jpg/171px-Official_portrait_of_Deval_Patrick.jpg); background-position-y: -.5rem; }






@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  src: local('Oranienbaum'), local('Oranienbaum-Regular'), url(http://themes.googleusercontent.com/static/fonts/oranienbaum/v1/WyaFSM_en0pjtlmUWwS7GbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................