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>