I coded the whole masonry layout with Isotope with help of this ( https://codepen.io/Goji/pen/Kpgegd ) This worked out great, and I made several categories.

I wanted the images to have an overlay when you click on it, so I used this code: https://codepen.io/HVinh/pen/xwmVJb

But I don't know how to select the overlay from the css in my for loops. It's probably very easy, something with .find('.overlay') but I don't know where to place it.

This is the code; I've only applied it to category 0 so far.

// category 0: live

for(var i=0; i < Imgs_c0.length; i++){

var cat = 0;

items += '<div class="grid-item c'+cat+' wow fadeInUp" ><a href="' + Imgs_c0[i%Imgs_c0.length] + '" data-featherlight="image"><img src="'+Imgs_c0[i%Imgs_c0.length]+'" /></a></div>';

}

// category 1: events

for(var i=0; i < Imgs_c1.length; i++){

var cat = 1;

items += '<div class="grid-item c'+cat+' wow fadeInUp" ><img src="'+Imgs_c1[i%Imgs_c1.length]+'" /></div>';

}

// category 2: backstage

for(var i=0; i < Imgs_c2.length; i++){

var cat = 2;

items += '<div class="grid-item c'+cat+' wow fadeInUp" ><img src="'+Imgs_c2[i%Imgs_c2.length]+'" /></div>';

}

return $(items);

}