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>
`