Estoy usando flex en CSS para crear una cuadrícula de miniaturas. Esta cuadrícula se ve bien y se muestra como quiero. Desde entonces, he intentado agregar un efecto de desplazamiento a la sección de imagen que activa un evento de desplazamiento de CSS y cambia la opacidad de un div que está oculto.

Lo extraño es que si tengo 10 cajas flexibles todas en una fila, el evento de desplazamiento se activa correctamente en cada elemento flexible por separado. Sin embargo, tan pronto como un elemento flexible pasa a la siguiente línea, el evento de desplazamiento no funciona correctamente y aplica el evento a elementos aleatorios.

Publiqué el código en JSFiddle, no contiene imágenes ni íconos, pero el efecto sigue siendo el mismo. https://jsfiddle.net/nathanrhys/vf5z53sc/

Para completar, aquí está el <li> html (obviamente, hay más de un elemento en la vida real)

<ul class="flex-container">
<li class="flex-item">
      <div class="thumbnail-container">
            <div class="roll">
                 <i class="captionicons fa fa-expand fa-4x" aria-hidden="true"></i>
            </div>
            <div class="image-container">
                <img class="image-item" src="Images/IMAGE (474).JPG" />
            </div>

            <div class="thumbnail-title">DSC_00233.jpg</div>
            <div class="thumbnail-icons">
            <section>
                 <div class="thumbleft"><i class="fa fa-eye fa-lg" aria-hidden="true"></i>&nbsp&nbsp <b>620</b></div>
                 <div class="thumbright"><i class="fa fa-folder fa-lg" aria-hidden="true"></i></div>
            </section>
            </div>
      </div></li></ul>

Y el CSS de estos elementos

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-start;
}

.flex-item {
    width: 200px;
    height: 230px;
    margin: 10px;
    border: 1px solid #e2e2e2;
    color: white;
    background: #ffffff;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    height: 160px;
}

.image-item {
    max-width: calc(200px - 3px);
    max-height: calc(160px - 3px);
}

 .roll:hover  {
    opacity: 0.6;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;

}

.roll {
    position: absolute;
    width:200px;
    height: 166px;
    top:19px;
    background: #000;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

Soy nuevo en esto, así que ayúdenme a encontrar mi error. Intenté mover el cursor al elemento flexible más div pero esto sigue causando el mismo problema.

0
NathanJ 17 ago. 2016 a las 23:23

2 respuestas

La mejor respuesta

Así que gracias a Denis me di cuenta de que no había establecido la posición en .image-container como relativa. Añadiendo

position: relative;
overflow: hidden;

Para .image-container el desplazamiento funciona como se esperaba.

He actualizado esto en JSFiddle, https://jsfiddle.net/nathanrhys/a7tbgwzr/

0
NathanJ 18 ago. 2016 a las 07:55

Probé esto y funciona. En lugar de tener un div con class roll que tiene una opacidad inicial de 0 que luego cambia a 0.6 al pasar el mouse, puede poner un fondo negro en el contenedor de la imagen. Luego, cuando pasa el cursor sobre la imagen, reduce su opacidad y obtendrá esencialmente el mismo efecto. Agregue esto a su CSS:

.image-item:hover {
  opacity: 0.4;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

Eche un vistazo a este violín actualizado

0
Denis Kumbaradzi 17 ago. 2016 a las 21:33