Masonry filterbaar portfolio layout voor Divi

Gratis massonry Filterbaar Portfolio Divi Layout

Deze gratis Divi-lay-out is een geweldige manier om uw portfolio weer te geven wanneer uw aanbevolen afbeeldingen van verschillende groottes zijn. Het is volledig responsief en het kolomnummer wordt aangepast op basis van de apparaatgrootte zonder dat media-vragen nodig zijn. Je kunt dit ook gebruiken met een rij over de volledige breedte en aangepaste rugmargewaarden en het kolomnummer zal automatisch toenemen

Voeg dit in je javascript

$(document).bind('ready ajaxComplete', function () {
$(".mili-masonry-portfolio .et_pb_portfolio_item").each(function () {
$(this).find(".et_pb_module_header, .post-meta").wrapAll('');
});
});

Voeg dit in je CSS
/*Verberg element totdat alles is geladen */

.ds-masonry-portfolio .et_pb_portfolio_item {
display: none;
}

/*initialiseer aantal kolommen*/

.ds-masonry-portfolio .et_pb_portfolio_items {
-webkit-columns: 14em; /*increase em values for less columns, decrease for more columns*/
columns: 14em; /*increase em values for less columns, decrease for more columns*/
-webkit-column-gap: 10px; /*space between columns*/
column-gap: 10px; /*space between columns*/
width: 100%;
margin-bottom: 30px;
}

/*Groote en ruimte van elementen*/

.mili-masonry-portfolio .et_pb_portfolio_item {
width: 100%;
margin: 0;
border-bottom: 10px solid transparent; /*space between images (should be same value as space between columns)*/
overflow: hidden;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
}

/*Verwijder ruimte van titel*/

.mili-masonry-portfolio .et_pb_portfolio_item h2 {
margin-top: 0;
padding-bottom: 0;
}

/*Style de titel en text*/

.mili-masonry-portfolio .mili-portfolio-text {
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 20px; /*padding around title and category*/
background: rgba(255, 255, 255, .8); /*overlay colour on hover*/
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}

/*Activeer hover effect*/

.mili-masonry-portfolio .et_pb_portfolio_item:hover .mili-portfolio-text {
opacity: 1;
}

/*Ruimte tussen filters*/

.mili-masonry-portfolio .et_pb_portfolio_filters ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}

.mili-masonry-portfolio .et_pb_portfolio_filters li {
min-width: 20%; /*adjust percentage based on number of filters*/
text-align: center;
}

/*————————————————————–*/
/*—–Einde Massonry Filterbaar—–*/
/*————————————————————–*/

Credits aan divisoup