mercredi 25 février 2015

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

Aucun commentaire:

Enregistrer un commentaire