CodePen Embed - shop shoes eCommerce CSS Grid

<ul>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>I-5923 RUNNER PRIDE</h2>
 <p>£99.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas01.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>TIGER ALLY</h2>
 <p>£95.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger05.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_R1</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas02.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>CALIFORNIA 78</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/trainer01.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>TUBULAR DUSK PRIMEKNIT</h2>
 <p>£109.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas05.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>GSM</h2>
 <p>£80.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger04.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>NMD_CS2 PRIMEKNIT</h2>
 <p>£149.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas04.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>MEXICO 66</h2>
 <p>£75.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger02.png' alt='' />
 </li>
 <li class="adidas">
 <div>
 <h2>STAN SMITH</h2>
 <p>£74.95</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas03.png' alt='' />
 </li>
 <li class="tiger">
 <div>
 <h2>ALVARADO</h2>
 <p>£70.00</p>
 </div>
 <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger03.png' alt='' />
 </li>
</ul>

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

:root {
 --columns: 3;
}

body{
 color: #5A626F;
 background-color: #E7FFF4;
 font-family: 'Open Sans Condensed', sans-serif;
}

ul{
 margin: 0;
 display: grid;
 grid-template-columns: repeat(var(--columns),1fr);
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 600 1040' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M0 0l300 173.205v346.41L0 346.41V0z' fill='url(%23_Linear1)'/%3E%3Cpath d='M300 519.615L600 692.82v346.411L300 866.025v-346.41z' fill='url(%23_Linear2)'/%3E%3Cpath d='M600 0L300 173.205v346.41L600 346.41V0z' fill='url(%23_Linear3)'/%3E%3Cpath d='M300 519.615L0 692.82v346.411l300-173.206v-346.41z' fill='url(%23_Linear4)'/%3E%3Cdefs%3E%3ClinearGradient id='_Linear1' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 646.41 173.205) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear2' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-30 1766.025 -126.796) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23b7ccc3'/%3E%3Cstop offset='1' stop-color='%23cde2d9'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear3' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 346.41 92.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3ClinearGradient id='_Linear4' x1='0' y1='0' x2='1' y2='0' gradientUnits='userSpaceOnUse' gradientTransform='rotate(-150 266.025 392.82) scale(346.41)'%3E%3Cstop offset='0' stop-color='%23e8dad1'/%3E%3Cstop offset='1' stop-color='%23fff0e7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
 background-size: calc(200%/(var(--columns)));
}

li{
 grid-column-end: span 2;
 position: relative;
 padding-bottom: 86.66%;
}

li:nth-child(2n-1){
 grid-column-start:2;
}

li:before{
 content: "";
 position: absolute;
 right: 0;
 width: 50%;
 height: 100%;
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png);
 background-position: 90% 27%;
 opacity: 0.6;
 transform: skewy(30deg);
 background-size: 40%;
 background-repeat: no-repeat;
}
.adidas:before{
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png);
}
.tiger:before{
 background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/tiger.png);
}
div{
 position: absolute;
 width: 50%;
 font-size: calc(15vw/var(--columns));
 transform: skewy(-30deg);
 margin-top: 14%;
 padding: 3%;
}

p{
 font-size: 2em;
}

img{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 width: 62%;
 bottom: -10%;
 -webkit-filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
 filter: drop-shadow(0 50px 20px rgba(0, 0, 0, 0.20));
 transition-property: bottom, filter, -webkit-filter;
 transition-duration: .3s;
}

img:hover{
 bottom: 0;
 -webkit-filter: drop-shadow(0 80px 40px rgba(0, 0, 0, 0.20));
 filter: drop-shadow(0 80px 30px rgba(0, 0, 0, 0.20));
 }

@media (min-width:600px){
 :root {
 --columns: 5;
 }
 li:nth-child(2n-1){
 grid-column-start:auto;
 }
 li:nth-child(4n-3){
 grid-column-start:2;
 }
}
@media (min-width:900px){
 :root {
 --columns: 7;
 }
 li:nth-child(4n-3){
 grid-column-start:auto;
 }
 li:nth-child(6n-5){
 grid-column-start:2;
 }
}
@media (min-width:1200px){
 :root {
 --columns: 9;
 }
 li:nth-child(6n-5){
 grid-column-start:auto;
 }
 li:nth-child(8n-7){
 grid-column-start:2;
 }
}
@media (min-width:1500px){
 :root {
 --columns: 11;
 }
 li:nth-child(8n-7){
 grid-column-start:auto;
 }
 li:nth-child(10n-9){
 grid-column-start:2;
 }
}
@media (min-width:1800px){
 :root {
 --columns: 13;
 }
 li:nth-child(10n-9){
 grid-column-start:auto;
 }
 li:nth-child(12n-11){
 grid-column-start:2;
 }

}
@media (min-width:2100px){
 :root {
 --columns: 15;
 }
 li:nth-child(12n-11){
 grid-column-start:auto;
 }
 li:nth-child(14n-13){
 grid-column-start:2;
 }

}

This Pen is owned by SMART WEB on CodePen.

See more by @efalan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.