E. Shio E. Shio - 3 months ago 6
CSS Question

CSS Only Works on First Column of Site

As you can see, the css only works on the first column to display the item-meta. What is wrong? All the text/meta is in the right place, if you inspect it, it's there. Just for some reason it does not want to change the opacity back to 1. It's odd though as it is clearly working in the first column and it is all the same code. Also, the item however is clearly working because the dark overlay is displaying.

When you resize the window to make it a 2 column display, there become more posts in the 1st column and they work fine.

Here is the link.

[EDIT]: The stuff in the second column will appear if you hover 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%;
}

Answer

There bug is cause by using CSS Columns. There are still a lot of bugs in the css column properties, hence them not being widely used. If you google "CSS column hover bug" you'll find similar issues.

If you can set the #blogposts div to a known height you can use flexbox with wrapping columns something like this - codepen example

Comments