7

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>

3
  • ¿Puedes poner tus imágenes reales para que se vea mejor? De primeras yo pondría display:inline-block en lugar de flex y en las imagenes quitaría position absolute. Pero no estoy segura de si es lo que quieres. jsfiddle.net/patrixd/opuggeoz Se quedaría en 3 líneas y 3 columnas.
    – ccsakuweb
    Commented el 28 dic. 2015 a las 7:21
  • si quieres que .image-grid ocupe todo el alto disponible, deberías agregarle height: 100% Commented el 28 dic. 2015 a las 12:38
  • 4
    De qué div hablas en tu pregunta? El HTML que compartiste no tiene un div (si tiene un section). Ninguno de los elementos tiene height: 100% (quitando el body). Aparte del problema que tratas de solucionar, estás agregando varios elementos con el mismo ID (todos los a tienen el ID cf), lo cual no es correcto.
    – gbellmann
    Commented el 28 dic. 2015 a las 16:27

2 respuestas 2

3

Es probable que las imágenes tengan ése tamaño máximo ? sin embargo en vez de utilizar el tamaño relativo a la etiqueta padre utilizando proporciones relativas i.e % si las imágenes van a ser del tamaño completo de la ventana como tal, se puede utilizar ViewPort height/width, ésto le facilita la posibilidad de tener el tamaño relativo a la ventana en vez de que sea relativo al padre.

No sé cuál es el div del que habla, (no lo veo en el código) pero si se trata del section pues intente ésto:

100vh es equivalente al 100% de la altura de LA VENTANA
100vw es equivalente al 100% del ancho de LA VENTANA
Esto es sin importar el tamaño que tenga la etiqueta padre.

[componente]{
  height: 100vh; 
 /* resto del código . . . */
}
2

Estimado, sería mejor exponer más información sobre el resultado final que tu requieres, pero por lo que entendí tu querías llegar a esto:

.image-grid{
  height:auto;
  width:500px;
  position:relative;  
  display: flex;
  -webkit-flex-direction:column;
  -webkit-flex-flow:wrap;
}

.image-grid .image {
  width:50%;
  height:300px;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
}

.image-grid .image img {
  width: 100%;
  height:100%;
  top:0;
  left:0;
  position:absolute;
  -webkit-transition:opacity .3s ease-in;
}

.image-grid .image:hover .top{
  opacity:0;
}
  
<section class="image-grid">
  <div 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" />
  </div>

  <div 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" alt="" />
  </div>

  <div 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="" />
  </div>

  <div 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="" />
  </div>

  <div 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="" />
  </div>

  <div 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="" />
  </div>
</section>

*tienes algunos problemas en la escritura de tu código, ya que, mencionas divs, pero en realidad ocupas otras etiquetas. Además tienes múltiples IDs en tus llamadas.

espero haber respondido tus dudas

1
  • 1
    En tu respuesta estás asumiendo cosas, varias de las cuales fueron pedidas por comentarios, los cuales esperamos que sean aclarados para poder dar una respuesta completa y correcta. También, cambiaste los a por div pero no quitaste el atributo href (ya edité la respuesta).
    – gbellmann
    Commented el 28 dic. 2015 a las 20:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.