Hola, estoy intentando crear de mil maneras un menu hecho con imagenes con el efecto hover.. Pero no entiendo porque no se ve el div completo. Me explico, el menu consta de 6 imagenes (que en realidad son doce, dos por imagen, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no se porque, y he probado como dije mil maneras, se solapan en una sola 'linea' y se acaban por ver tan solo tres...
Os dejo el codigo simplificado por si alguien que entienda ve donde esta el fallo.. Muchisimas gracias de antemano!
<style type="text/css">
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;
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;
}
</style>
<body>
<section class="image-grid">
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/1_weddings.jpg" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top"src="wp-content/uploads/2015/12/3_corporative.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/4_documentals.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/5_originals.jpg" alt="" /></a>
<a id="cf" href="#" class="image">
<img class="bottom" src="wp-content/uploads/2015/12/2_events-bona.jpg" alt="weddings" title="weddings" />
<img class="top" src="wp-content/uploads/2015/12/6_freelancers.jpg" alt="" /></a>
</section>