title: Show first image and display none other image
body: <p>I have one question about displaying image. I have created this <strong><a href="http://codepen.io/shadowman86/pen/pvVBme" rel="nofollow">DEMO</a></strong> from <em>codepen.io</em></p>
  
  <p>In this demo you can see there is a two <code>.image_container</code> div. And this divs inside have tree image. First div showing tree image and second div showing only one image (other 2 image <code>display:none;</code>). I want to make it like second <code>.image_container</code> (Show first image and <code>display:none;</code> other two or more image.) How can i do that width jquery or CSS anyone can help me here ?</p>
  
  <p>I tryed like this javascript but it is display:none; other <code>.image_container</code> div inside image.</p>
  
  <p>javascript</p>
  
  <pre><code>$(".image_container a:first-child").css("display", "block");
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="container"&gt;
        &lt;div class="image_container"&gt;
          &lt;a href="#"&gt;&lt;img src="http://fantasy-faction.com/wp-content/uploads/2014/04/Avatar.jpg"&lt;/a&gt;
            &lt;a href="#"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/en/3/38/Avatarjakeneytiri.jpg"&lt;/a&gt;
              &lt;a href="#"&gt;&lt;img src="http://fc09.deviantart.net/fs70/f/2010/015/8/9/Cristiano_Ronaldo_avatar_by_Tsunamy_boy.png"&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="image_container"&gt;
           &lt;a href="#"&gt;&lt;img src="http://fantasy-faction.com/wp-content/uploads/2014/04/Avatar.jpg"&lt;/a&gt;
  
            &lt;a href="#" class="none"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/en/3/38/Avatarjakeneytiri.jpg"&lt;/a&gt;
              &lt;a href="#" class="none"&gt;&lt;img src="http://fc09.deviantart.net/fs70/f/2010/015/8/9/Cristiano_Ronaldo_avatar_by_Tsunamy_boy.png"&lt;/a&gt;
              &lt;div clas="need"&gt;Want to make like this&lt;/div&gt;  
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    body {
        background-color:#000;
      } 
      .container {
        margin:0px auto;
        width:650px;
        height:auto;
        margin-top:50px;
      }
      .image_container {
        float:left;
        width:300px;
        background-color:#ffffff;
        border-radius:3px;
        padding-bottom:30px;
        margin-right:20px;
      }
      .image_container  img {
        width:300px;
        height:auto;
      }
      .none {
        display:none;
      }
      .need {
        float:left;
        width:300px;
        background-color:red;
      }
  .image_container a{display:none;}
  </code></pre>