LoL Champion Roster - Flexbox

index.haml

.wrapper
  .item.ryze
  .item.irelia
  .item.jinx
  .item.katarina
  .item.ziggs

lol-champion-roster-flexbox.markdown

LoL Champion Roster - Flexbox

A Pen by Max on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$ryze: "http://lolwp.com/wp-content/uploads/Dark-Crystal-Ryze.jpg";
$irelia: "http://lolwp.com/wp-content/uploads/Irelia-fanart.jpg";
$jinx: "http://lolwp.com/wp-content/uploads/2013/09/Jinx-Classic.jpg";
$katarina: "http://lolwp.com/wp-content/uploads/Mercenary-Katarina-Updated.jpg";
$ziggs: "http://lolwp.com/wp-content/uploads/Ziggs_Splash_0.jpg";

@import url(https://fonts.googleapis.com/css?family=Raleway:100,300);

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  .item {
    display: flex;
    flex-grow: 1;
    transition: all .5s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    &:hover {
      flex-grow: 4;
      box-shadow: inset 0 0 20px #000;
    }
    &:after {
      content: "";
      width: 200%;
      height: 43.33%;
      background-color: rgba(#000, 0.75);
      left: -50%;
      bottom: -10%;
      position: absolute;
      transform: rotate(-15deg);
      color: #fff;
      text-align: center;
      padding-top: 20px;
      text-transform: uppercase;
      font-size: 40px;
      font-family: 'Raleway';
      font-weight: 100;
    }
    &.ryze {
      background-image: url($ryze);
      background-position: 70% center;
      &:after {
        content: "Ryze";
      }
    }
    &.irelia {
      background-image: url($irelia);
      background-position: 45% center;
      &:after {
        content: "Irelia";
      }
    }
    &.jinx {
      background-image: url($jinx);
      background-position: 70% center;
      &:after {
        content: "Jinx";
      }
    }
    &.katarina {
      background-image: url($katarina);
      background-position: 70% center;
      &:after {
        content: "Katarina";
      }
    }
    &.ziggs {
      background-image: url($ziggs);
      background-position: 75% center;
      &:after {
        content: "Ziggs";
      }
    }
  }
}