$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(http://fonts.lug.ustc.edu.cn/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";

      }

    }

  }

}