I have a problem, it turns out that when clicking on two images from the gallery, the photos overflow, let's say when they are in :active, for the rest of the images it does not apply, they look good when doing :hover and :active etc. It seems strange to me because it is the same code for all the photos, why does it work for some and not for others?
In total there are about 25 photos, the images that present the problem are the one of the leaf of a plant that seems painted and the one of the book leaf, in fact they are both very close. Just by clicking on those photos is where you can see that they overflow
Overflowing photos, click on the link
.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>
`
Although I don't know why this happens based on trial and error I solved it.
Verification
To verify it, use the chrome DevTools putting in the label
<a>
inside thebox-img
and I put the propertieshover, visited, focus
and then I addedbox-img
the propertyhover
in that way you can clearly see if it fails or not.Solution
Add to the tag
<a>
insidebox-img
the propertyoutline:none
this will remove theoutline
one that seems to be giving you troubleAlthough there should be no problems, the
outline
default is set when an element is presentfocus
(which labels can be donefocus
anddiv
you have to set an attribute for them to act like that).This property apparently was causing the animation to
scale(1.1)
work badly (since if you change the propertytransition
instead ofall
putting another property this problem does not happen) .I can make a lot of unsubstantiated guesses like: "outline occupies 1px on each side" or something like that. But I really don't know exactly why this problem exists