Estoy intentando crear de mil maneras un menumenú hecho con imagenesimágenes con el efecto hover, pero no entiendo porque no se ve el divdiv
completo. Me explico, el menu
El menú consta de 6 imagenesimágenes (que en realidad son doce, dos por imagenopción de menú, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras,sé por qué se solapan en una sola 'linea' y se acaban por ver tan solo tres...
Os dejo el codigocódigo simplificado por si alguien que entienda ve donde estadónde está el fallo.. Muchisimas gracias de antemano!:
html, body {
height: 100%;
}
.image-grid {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.image-grid .image {
width: 33%;
padding-left: 6px;
}
.image-grid .image img {
width: 100%;
}
#cf {
position: relative;
width: 33%;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#cf img {
position: absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity: 0;
height: 350px;
}
<section class="image-grid">
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/1_weddings.jpg"200/people" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/3_corporative.jpg"200/city" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/4_documentals.jpg"200/sports" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/5_originals.jpg"200/cats" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/2_events-bona.jpg"200/nature" alt="weddings" title="weddings" />
<img class="top" src="wp-contentsrc="http:/uploads/2015lorempixel.com/12200/6_freelancers.jpg"200/abstract" alt="" />
</a>
</section>