Estoy intentando crear un menú hecho con imágenes con el efecto hover, pero no entiendo porque no se ve el div
completo.
El menú consta de 6 imágenes (que en realidad son doce, dos por opción de menú, por el hover) y deben de verse en dos 'lineas'. Sin embargo, no sé por qué se solapan en una sola 'linea' y se acaban por ver tan solo tres.
Os dejo el código simplificado por si alguien que entienda ve dónde está el fallo:
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="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/people" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/nature" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/city" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/sports" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/cats" alt="" />
</a>
<a id="cf" href="#" class="image">
<img class="bottom" src="http://lorempixel.com/200/200/nature" alt="weddings" title="weddings" />
<img class="top" src="http://lorempixel.com/200/200/abstract" alt="" />
</a>
</section>
.image-grid
ocupe todo el alto disponible, deberías agregarleheight: 100%
div
hablas en tu pregunta? El HTML que compartiste no tiene undiv
(si tiene unsection
). Ninguno de los elementos tieneheight: 100%
(quitando el body). Aparte del problema que tratas de solucionar, estás agregando varios elementos con el mismo ID (todos losa
tienen el IDcf
), lo cual no es correcto.