title: how to make that first child box to appear in the middle
body: <p>Here's the <a href="http://jsfiddle.net/9u1Ld12u/" rel="nofollow">js fiddle</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="tiles-slider-wrapper"&gt;
      &lt;ul class="tiles-slider"&gt;
        &lt;li&gt;&lt;img src="img/slider/1.jpg" alt="image"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/slider/2.jpg" alt="image"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/slider/3.jpg" alt="image"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/slider/4.jpg" alt="image"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="img/slider/5.jpg" alt="image"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.tiles-slider {
     padding: 0;
     list-style-type: none;
     overflow: auto;
     margin-bottom: 0;
     background: #000;
  }
  
  .tiles-slider li {
     width: 25%;
     float: left;
     -webkit-transition: transform .3s ease-in-out;
     -moz-webkit-transition: transform .3s ease-in-out;
     transition: transform .3s ease-in-out;
  }
  
  .tiles-slider img {
      width: 100%;
  }
  /* this dictates the size of the boxes*/
  .tiles-slider li:first-child {
     width: 50%;
  }
  /*.tiles-slider li:nth-child(2) {
     width: 50%;
  }*/
  .shrink-tile {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
     transform: scale(0.5);
  
  }
  
  .tiles-slider li:first-child.shrink-tile {
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
     transform: scale(0.25);
  }   
  </code></pre>
  
  <p>All I want is to make the image looks bigger in the middle. So it will be two images on the left,two images on the right and One big image in the middle. I tried changing the nth:child to 2,3,4 and even 5.It keeps adding the columns and rows and doesn't become what I want.Hope someone can help.Thanks</p>