在tile下使用ajax内容的HTML / CSS Tile

Question

我想要两行四个图块

每个图块在用户点击时加载特定内容。加载的内容应显示在图块下方，视口宽度为100％。

点击第一行的平铺：内容应显示在平铺下，下一行之间......

单击第二行的图块，内容显示在图块之外。 active tile in last row

这也适用于响应...... responsive view

但是我没有得到正确的css来做这个伎俩。目前使用以下标记生成每个图块：

<div class="col-md-3 col-sm-6 portfoliotile portfoliotile-'.$post->ID.'">
<div class="background" style="background-image:URL"></div>
<div class="bluesquare"></div>
<p class="portfoliotitle">get_the_title()</p>
<div id="tileinfo-'.$post->ID.'" class="tileinfo col-md-12 collapse">
<img class="loader-icon spinning-cog" src="loading.svg" alt=""></div>
</div>

我的CSS：

.portfoliotile .background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: no-repeat center center;
background-size: cover;

filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" intercept="-0.5" /><feFuncG type="linear" slope="2" intercept="-0.5" /><feFuncB type="linear" slope="2" intercept="-0.5" /></feComponentTransfer></filter></svg>#filter');
-webkit-filter: grayscale(100%) contrast(200%);
filter: grayscale(100%) contrast(200%);
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease;
}
.portfoliotile:hover .background {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" /* IE 8+ */;
filter: none !important; /* IE 7 and the rest of the world */
-webkit-filter: none !important;
}
.bluesquare {
background: #325975;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.6;
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
transition: all 1s ease;
}
.portfoliotile:hover .bluesquare {
background: transparent;
}

.portfoliotitle {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: #FFF;
background: rgba(0,0,0,0.5);
margin: 0;
padding: 5px 0;
}

.tileinfo {
background: url(../images/bg_tileinfo.jpg) repeat-x;
height: 600px !important;
padding: 100px 0;
width: 100%;
display: none;
border-top: 2px solid #f59c00;
border-bottom: 2px solid #f59c00;
overflow: hidden;
position: relative;
-webkit-transition: all 5s ease; 
-moz-transition: all 5s ease; 
-o-transition: all 5s ease; 
transition: all 5s ease;
}

有人有想法吗？