Show first image and display none other image

I have one question about displaying image. I have created this DEMO from codepen.io

In this demo you can see there is a two .image_container div. And this divs inside have tree image. First div showing tree image and second div showing only one image (other 2 image display:none;). I want to make it like second .image_container (Show first image and display:none; other two or more image.) How can i do that width jquery or CSS anyone can help me here ?

<div class="container">
  <div class="image_container">
    <a href="#"><img src="http://ift.tt/1BTB5TV"</a>
      <a href="#"><img src="http://ift.tt/1ymTvaj"</a>
        <a href="#"><img src="http://ift.tt/1zHDzyN"</a>
  </div>
  <div class="image_container">
     <a href="#"><img src="http://ift.tt/1BTB5TV"</a>

      <a href="#" class="none"><img src="http://ift.tt/1ymTvaj"</a>
        <a href="#" class="none"><img src="http://ift.tt/1zHDzyN"</a>
        <div clas="need">Want to make like this</div>  
  </div>
</div>

CSS

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;
}