从显示过渡：从无到阻止

Question

我正在尝试从显示过渡：无过渡为不透明。但是，显示会覆盖不透明度，并且项目会立即弹出。有没有解决的办法。我需要显示：没有显示，因此我的页面流程没有损坏。而且我还没有找到使用绝对位置的方法。明确地说，我想要的效果是单击过滤器时，该过滤器下的项目会淡入和淡出。我正在使用jquery触发显示转换。单击过滤器按钮后，.show类将应用于.item

.item {
background: lightgrey;
height: 600px;
width: 16.66666666%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
z-index: ;
display: none;
transition: all .5s ease-in-out;
opacity: 0;
}

.show {
display: block;
 opacity: 1;
}

实时网站