CSS Only Works on First Column of Site

Question

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%;
}

And html. CSS is pretty meaningless with out it. Providing a link to a site you a currently fixing provides a mobing target and once fixed is meaningless. You are better off providing a [MCVE]9https://stackoverflow.com/help/mcve) in the question it self. — Jon P, Aug 09 '16 at 03:48

score 1 · Accepted Answer · edited Aug 24 '17 at 21:08

1

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

EDIT it appears that adding backface-visability:hidden to .blog-post .item-meta fixed the bug for some reason.

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

edited Aug 24 '17 at 21:08

TylerH

20,799
66
75
101

answered Aug 09 '16 at 03:48

JustH

1,372
8
8

1

Adding this code to .blog-post and all its children fixed the issue: -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; -webkit-backface-visibility:hidden; – ERIC Aug 09 '16 at 05:13
I recommend using that in your answer to help others :P – ERIC Aug 09 '16 at 05:13
1

Interesting, playing with it on a pen, it looks like `backface-visability:hidden` on `.items .meta` is what is fixing it. will add to answer. – JustH Aug 09 '16 at 05:50

score 0 · Answer 2 · answered Aug 09 '16 at 03:38

I am not sure exactly why the second column isnt working, but I could figure out that this might be caused by using transform to center the text. Use the below css to center the content which will give the intended animations.

.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;
    text-align: center;
    white-space: nowrap;
}

.blog-post .item:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.blog-post .item-meta {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.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;
}

CSS Only Works on First Column of Site

2 Answers2