It seems like the css is only working on the first column to display the item-meta. Everything appears to be in place when inspected, but for some reason, the opacity does not change back to 1. It's strange because it works fine in the first column even though the code is the same. The dark overlay for the item is displaying correctly.
When resizing the window to create a 2-column display, more posts appear in the 1st column and they function properly.
Visit this link.
[EDIT]: The content in the second column will become visible if hovered over long enough.
CSS:
#blog-posts {
text-align: center;
display: inline-block;
width: 100%;
padding: 0;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-gap: 0.2em;
-moz-column-gap: 0.2em;
-webkit-column-gap: 0.2em;
}
.blog-post img {
width: 100%;
height: auto;
}
.blog-post {
width: 100%;
height: auto;
margin: 0 0 0.2em;
display: inline-block;
position: relative;
vertical-align: top;
}
.blog-post .item {
position: absolute;
background: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.blog-post .item-meta {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.blog-post h3 {
font: 2em Lato;
text-transform: uppercase;
word-wrap: normal;
color: white;
vertical-align: middle !important;
position: relative;
display: inline-block;
width: auto;
line-height: 1em;
}
.attachment-post-thumbnail {
position: relative;
width: 100%;
display: inline-block;
height: 100%;
}
.blog-post .item:hover {
opacity: 1;
}
.content {
position: relative;
float: right;
// border: 1px solid yellow;
word-wrap: break-word;
white-space: normal;
box-sizing: border-box;
-webkit-box-sizing:border-box;
width: 86%;
overflow: hidden;
padding-right: 10%;
padding-left: 10%;
}