I finally got this pretty close, but I"m using Instafeed.js and my 4 images are perfectly centered horizonatally but my hover action that has a color overlay with text is off to the left.
Not sure what's up with this, but flexbox should center all this?
here's the code
<head>
<style type="text/css">
.container{
margin: 0 auto;
}
#instafeed {
display: flex;
flex-wrap: wrap;
}
.gallery-item {
width: 150px;
height: 150px;
margin: 10px;
text-decoration: none;
}
.gallery-item img {
position: absolute;
}
.caption_layer {
position: relative;
width: 150px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
color: #fff;
opacity: 0;
}
.caption_layer:hover {
transition: all 0.8s ease;
background: rgba(169,189,80,0.9);
opacity: 1;
}
.instaCaption {
font-size: 1.5em;
color:#5D5855;
}
</style>
</head>
<body>
<div class="container">
<div id="instafeed"></div>
</div>
$(document).ready(function() {
var feed = new Instafeed({
get: 'user',
userId: '',
clientId: '',
accessToken: '',
template: '<a class="gallery-item" target="_blank" href="{{link}}"><img class="image_img" src="{{image}}" /><div class="caption_layer"><p class="instaCaption">{{model.likes.count}} Likes</p></div></a>',
useHttp: true
});
feed.run();
});
</body>
What's the best way to get the hover to work, while keeping all images centered in a horizontal row and making sure the overlay is always the size of the image?