<div class="wrapper">
  <div class="section">
    <div class="desc">
      <div class="fill eich"></div>
      <div class="mapname">Eichenwalde</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
<div class="section">
    <div class="desc">
      <div class="fill watch"></div>
      <div class="mapname">Watchpoint: Gibraltar</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill hana"></div>
      <div class="mapname">Hanamura</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill holly"></div>
      <div class="mapname">Hollywood</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill ilios"></div>
      <div class="mapname">Ilios</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill krow"></div>
      <div class="mapname">King's Row</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill tower"></div>
      <div class="mapname">Lijiang Tower</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill nepal"></div>
      <div class="mapname">Nepal</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill num"></div>
      <div class="mapname">Numbanii</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill oasis"></div>
      <div class="mapname">Oasis</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill road"></div>
      <div class="mapname">Route 66</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill temp"></div>
      <div class="mapname">Temple Of Anubis</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="desc">
      <div class="fill volk"></div>
      <div class="mapname">Volskaya Industries</div>
      <div class="status">WIN</div>
      <div class="score">3 : 0</div>
      <div class="elo">2312 SR</div>
      <div class="elos">+32</div>
      <img class="rank" src="http://res.frozent.pl/ow/ranks/platinum.png">
      <div class="darkside"></div>
      <div class="heros">
        <div class="herosc" style="width: 80px;">
          <img class="hex" src="http://res.frozent.pl/ow/hex/ana_hex.png">
          <img class="hex" src="http://res.frozent.pl/ow/hex/bastioon_hex.png">
        </div>
      </div>
    </div>
  </div>
</div>
@font-face { font-family: "Overwatch"; src: url("http://us.battle.net/forums/static/fonts/bignoodletoo/bignoodletoo.woff") format('woff'); }
body { background: #111; padding: 0; margin: 150px 0; } 

.wrapper { margin: 0 auto; justify-content: center; display: flex; flex-wrap: wrap; }
.section { position: relative; font-family: 'Overwatch'; transition: 0.5s all; min-width: 398px; height: 120px; border: 1px solid black; display: inline-block; padding: 0; color: white; margin: 20px; }
.fill { transition: 0.5s all; filter: grayscale(50%) brightness(40%); position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.section:hover .fill { filter: grayscale(0%) brightness(70%); }
.section:hover { text-shadow: 0 0 35px black, 2px 2px 0 black; }
.desc { transition: 0.5s all; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section:hover .desc { height: 200%; top: -50%; z-index: 1; box-shadow: 0 0 125px black, 0 10px 50px black, 0 25px 30px black; }
.section:hover .rank { z-index: 1; opacity: 1 }
.section:hover .elos { left: calc(50% + 30px); z-index: 1; opacity: 1 }
.section:hover .elo { right: calc(50% + 40px); z-index: 1; opacity: 1 }
.section:hover .heros { bottom: 75px; z-index: 1; opacity: 1 }
.section:hover .mapname, .section:hover .status, .section:hover .score { z-index: 1; }
.section:hover .darkside { z-index: 0; }

.darkside { z-index: -1; position: absolute; bottom: 0px; height: 130px; left: 0; width: 100%; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.75)); }
.mapname { font-family: 'Overwatch'; position: absolute; bottom: -10px; left: 0px; width: 100%; text-align: center; font-size: 30px; color: white; }  
.status { font-family: 'Overwatch'; position: absolute; top: 20px; left: 0px; width: 100%; font-size: 55px; height: 40px; line-height: 40px; text-align: center; }
.score { font-family: 'Overwatch'; position: absolute; top: 58px; left: 0px; width: 100%; font-size: 20px; height: 40px; line-height: 40px; text-align: center; }
.elo { transition: 0.5s all; opacity: 0; font-family: 'Overwatch'; position: absolute; bottom: 37px; width: 88px; right: 50%; font-size: 20px; height: 40px; line-height: 40px; text-align: right; }
.rank { transition: 0.5s all; opacity: 0; position: absolute; bottom: 26px; right: calc(50% - 33px); width: 68px; font-size: 20px; height: 68px; line-height: 40px; }
.elos { transition: 0.5s all; opacity: 0; font-family: 'Overwatch'; position: absolute; bottom: 37px; width: 88px; left: 50%; font-size: 20px; height: 40px; line-height: 40px; text-align: left; }
.heros { transition: 0.5s all; opacity: 0; position: absolute; bottom: 20px; width: 100%; left: 0; height: 60px; line-height: 60px; }
.herosc { position: relative; margin: 0 auto; }
.hex { width: 40px; height: 40px; position: relative; float: left; }

.dorado { background: url("http://res.frozent.pl/ow/maps/dorado.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.eich { background: url("http://res.frozent.pl/ow/maps/eichenwalde.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.watch { background: url("http://res.frozent.pl/ow/maps/watchpoint_gibraltar.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.hana { background: url("http://res.frozent.pl/ow/maps/hanamura.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.holly { background: url("http://res.frozent.pl/ow/maps/hollywood.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.ilios { background: url("http://res.frozent.pl/ow/maps/ilios.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.krow { background: url("http://res.frozent.pl/ow/maps/kings_row.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.tower { background: url("http://res.frozent.pl/ow/maps/lijiang_tower.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.nepal { background: url("http://res.frozent.pl/ow/maps/nepal.png") center center; background-size: cover; background-repeat: no-repeat; }
.num { background: url("http://res.frozent.pl/ow/maps/numbani.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.oasis { background: url("http://res.frozent.pl/ow/maps/oasis.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.road { background: url("http://res.frozent.pl/ow/maps/route_66.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.temp { background: url("http://res.frozent.pl/ow/maps/temple_of_anubis.jpg") center center; background-size: cover; background-repeat: no-repeat; }
.volk { background: url("http://res.frozent.pl/ow/maps/volskaya_industries.jpg") center center; background-size: cover; background-repeat: no-repeat; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.