transition and opacity make some images disappear

Navigation
1

I'm trying to simulate masonry jQuery using only CSS columns , I managed to do it quietly, the problem is that I put an opacity and transition in the image and :hover of the image, when the mouse passes over , the layout breaks and some images disappear

Example online: link

Code: 

* {border: 0; margin: 0; padding: 0; outline: 0;}

body {
	background: teal;
}


.masonry {
	column-gap: 1px;
	-moz-column-gap: 1px;
	-webkit-column-gap: 1px;	
}


/*Column items*/
.item{
	display: block;

	/*largura do item*/
	width: 100%; 

	/* avoid break*/
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	-ms-column-break-inside: avoid; 
	-o-column-break-inside: avoid; 

	/*tira o maldito espaço de 4px*/
	font-size: 0;	

	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.item img {
	max-width: 100%;

	/*opacidade*/
	opacity: 0.6;
	-webkit-opacity: 0.6;
	-moz-opacity: 0.6;
	-o-opacity: 0.6;

	/*transition*/
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
}

.item img:hover {
	/*opacidade*/
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;

	/*transition*/
	transition: all 1s;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
}

/*Column top*/
.item-first{
	break-before: always; 
	-webkit-column-break-before: always; 
	-moz-column-break-before: always;
	-ms-column-break-before: always; 
	-o-column-break-before: always; 
}

.menu {
	background: #666 !important; 
	-webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.56);
	-moz-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.56);
	box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.56);
	position: fixed;
	height: 60px;

	box-sizing: 60px;
	-webkit-box-sizing: 60px;
	-mozox-sizing: 60px;

	z-index: 2;
}


/*MEDIA QUERIES*/
@media only screen and (max-width: 360px) {
	.masonry {
		column-count: 1;
		-moz-column-count: 1;
		-webkit-column-count: 1;
	}

}

@media only screen and (min-width: 361px) and (max-width: 780px) {
	.masonry {
		column-count: 2;
		-moz-column-count: 2;
		-webkit-column-count: 2;
	}

}


@media only screen and (min-width: 781px) and (max-width: 1170px) {
	.masonry {
		column-count: 3;
		-moz-column-count: 3;
		-webkit-column-count: 3;
	}

}


@media only screen and (min-width: 1171px) and (max-width: 1540px) {
	.masonry {
		column-count: 4;
		-moz-column-count: 4;
		-webkit-column-count: 4;
	}

}

@media only screen and (min-width: 1541px) and (max-width: 1920px) {
	.masonry {
		column-count: 5;
		-moz-column-count: 5;
		-webkit-column-count: 5;
	}

}

@media only screen and (min-width: 1921px) and (max-width: 2300px) {
	.masonry {
		column-count: 6;
		-moz-column-count: 6;
		-webkit-column-count: 6;
	}

}

@media only screen and (min-width: 2301px) and (max-width: 2600px){
	.masonry {
		column-count: 7;
		-moz-column-count: 7;
		-webkit-column-count: 7;
	}

}
<ul class="masonry" id="horizonry">
    <li class="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li><liclass="item"><img src="http://lorempixel.com/400/200/animals/Img0s1"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img02"></li><liclass="item"><img src="http://lorempixel.com/400/300/animals/Img03"></li><liclass="item"><img src="http://lorempixel.com/400/400/animals/Img04"></li><liclass="item"><img src="http://lorempixel.com/400/320/animals/Img05"></li><liclass="item"><img src="http://lorempixel.com/400/500/animals/Img06"></li><liclass="item"><img src="http://lorempixel.com/400/600/animals/Img07"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/410/animals/Img08"></li><liclass="item"><img src="http://lorempixel.com/400/940/animals/Img09"></li><liclass="item"><img src="http://lorempixel.com/400/660/animals/Img10"></li><liclass="item"><img src="http://lorempixel.com/400/420/animals/Img11"></li><liclass="item"><img src="http://lorempixel.com/400/880/animals/Img12"></li>
</ul>
    
asked by anonymous 26.06.2015 / 15:20

1 answer

0

I tested it in chrome, I tried to recreate it from the beginning, but the problem persists, it only affects tags inside .item , which seems to be a bug that only occurs with transition .

A hint (there is no problem), always use the experimental selectors first and then the default selectors: 

/*Experimental*/
-webkit-opacity: 0.1;
   -moz-opacity: 0.1;
        opacity: 0.1;

Another thing, it is not necessary to add transition to both selectors ( .item and .item:hover ): 

.item {
    ...
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

.item:hover {
    ...
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

Use only in .item { .

Alternative

As I said it seems to really be a BUG, however in CSS we can do things in several ways, a suggestion would be (it's just an initial example and you can adapt it using media-queries): 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    * {border: 0; margin: 0; padding: 0; outline: 0;}

    body {
        background: teal;
    }

    .masonry {
        width: 99%;
    }
    .col {
        width: 33%;
        float: left;
    }
    .col img {
        width: 100%;
        display: block;
    }
    .col img {
        opacity: 0.6;
        transition: opacity 1s;
    }
    .col img:hover {
        opacity: 1;
    }
    </style>
</head>
<body>
    <div class="masonry">
        <div class="col">
            <div class="item"><img src="Img0s1.jpg"></div>
            <div class="item"><img src="Img02.jpg"></div>
            <div class="item"><img src="Img03.jpg"></div>
            <div class="item"><img src="Img04.jpg"></div>
        </div>

        <div class="col">
            <div class="item"><img src="Img07.jpg"></div>
            <div class="item"><img src="Img08.jpg"></div>
            <div class="item"><img src="Img09.jpg"></div>
            <div class="item"><img src="Img10.jpg"></div>
        </div>

        <div class="col">
            <div class="item"><img src="Img10.jpg"></div>
            <div class="item"><img src="Img11.jpg"></div>
            <div class="item"><img src="Img12.jpg"></div>
            <div class="item"><img src="Img0s1.jpg"></div>
        </div>
    </div>
</body>
</html>
    
26.06.2015 / 16:44
Save status listview "HEAP CORRUPTION DETECTED" [closed]