I had created masonry images design with pure CSS.
Link here to codepen (only html and css) No materialize CSS and JS
However, I want the effect of `materialboxed` class from materializeCSS
Link to materialbox class from materializeCSS
The problem is that when I add materialboxed class to image, the masonry layout is changed
link to codepen with masonary design + materializeCSS
Expected Result
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
@media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
@media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}<section class="container">
<div class="gallery">
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>Example with design not working with class materializedbox
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
M.Materialbox.init(elems);
});.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
@media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
@media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<section class="container">
<div class="gallery">
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>from Masonry images design issue with MaterializeCSS "materialboxed" class
No comments:
Post a Comment