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