0

Tengo un problema, resulta que al dar click en dos imágenes de la galería, se desbordan las fotos, digamos cuando están en :active, para el resto de las imágenes no aplica, se ven bien al hacer :hover y :active etc. Me parece raro porque es el mismo código para todas las fotos, por qué para unas sí sirve y para otras no??

En total son como 25 fotos, las imágenes que presentan el problema es la de la hoja de una planta que parece pintada y la de la hoja del libro, de hecho están muy cerca ambas. Justo al darle click a esas fotos es donde se puede ver que se desbordan

Fotos desbordadas, da click en el enlace

.gal {
  
    -ms-column-count: 3; 
    -webkit-column-count: 3; 
     -moz-column-count: 3; 
         column-count: 3;
      overflow: hidden;
      padding: 3px;
          
  } 

.box-img{
  
  position: relative;
  overflow: hidden;
  
}


.gal .box-img:not(:first-child){
  overflow: hidden;
  margin-top: 1rem;

}



.box-img img{

  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}


.box-img:hover img{
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  z-index: -1;
  width: 100%;
  height:100%;
}




.box-img img:after{
  overflow: hidden;
}




.gal .box-img a:after{ 
  font-weight: 900;
  content: "";
  opacity: 0;
  position: absolute;
  right: 3px;
  z-index: 1;
  height: 100%;
  width: 100%;
  left:50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  text-align: center;
  line-height: 350px;
  font-size: 30px;
  color: #fff;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  overflow: hidden;
}

.gal a:hover:after{
  opacity: 1;

}





@media (max-width: 500px) {
    
    .gal {  
  -ms-column-count: 1; 
  -webkit-column-count: 1; /* Chrome, Safari, Opera */ /* Firefox */
    -moz-column-count: 1;
       column-count: 1;
    
  
  }
    
  }
  <div class="gal">
  <!-- individual img -->    
   <div class="box-img">    
    <a href="img/gallery/masonry/1.jpg" data-lightbox="image-1" data-title="My caption">        
        <img src="img/gallery/masonry/1.jpg" alt="" width="100%" height="auto">
    </a>
   </div> 
  <!-- /individual img -->
   </div>   

`

1 respuesta 1

1

Aunque no se porque pasa esto a base de prueba y error lo solucione.

Comprobación
Para comprobarlo utilice la DevTools de chrome poniendo en la etiqueta <a> dentro del box-img y le puse las propiedasdes hover, visited, focus y luego le añadí al box-img la propiedad hover de esa manera se puede ver claramente si falla o no falla.

Solución
Añadir a la etiqueta <a> dentro de box-img la propiedad outline:none esto quitará el outline que parece dar problemas

Aunque no deberia de haber problemas, el outline por defecto se pone cuando un elemento esta focus (cosa que las etiquetas se pueden hacer focus y los div les tienes que poner un atributo para que actuen así).
Esta propiedad por lo visto estaba haciendo que la animación del scale(1.1) funcionase mal (ya que si cambias la propiedad transition en vez de all lo pones otra propiedad no pasa este problema).


Puedo hacer un montón de conjeturas sin fundamento como: "el outline ocupa 1px en cada lado" o algo así. Pero realmente no se exactamente porque existe este problema

1
  • woooow!! muchas gracias, te daría mill puntos pero la plataforma no me lo permite, mil gracias :D ya me estaba volviendo loca!! Commented el 30 oct. 2019 a las 14:27

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.