well I figured it out… however I am now trying to understand how to make this responsive.
I had to place the first column / card group on a different z index than the other three and work out the pixel placement to get them to stack since there is 80 px of margin on each card to hid the reveal content.
I am wondering if i need to have this layout show on mobile and then create another set of images configured for desk top and just hide and reveal based on screen size, or is there to reposition the columns to two high and two wide on desktop when they are z-indexed to stack for mobile…
CSS below - attached image shows the HTML
.newsCard {
position: relative;
width: auto;
height: 250px;
margin: 5rem auto;
background-color:
#fff;
color:
#fff;
overflow: hidden;
-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
background-image: url("…/assets/mosaicImages/iceBergOne.jpg");
background-position: 50%;
background-size: cover;
}
.newsCaption {
position: absolute;
top: auto;
bottom: 0;
opacity: .6;
left: 0;
width: 100%;
height: 90%;
background-color: #000;
padding: 15px;
-webkit-transform: translateY(80%);
transform: translateY(80%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}
.newsCaption-title {
margin-top: 0px;
}
.newsCaption-content {
margin: 0;
}
.newsCaption-link {
color: #fff;
text-decoration: underline;
opacity: .8;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
}
.newsCaption-link:hover {
opacity: 0.65;
}
.news-Slide-up:hover .newsCaption {
opacity: .6;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
transition: opacity 0.1s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
}
.wrap {
position: relative;
}
#d3 {
position: absolute;
top: 260px;
}
#d4 {
position: absolute;
top: 520px;
min-width: 410px;
z-index: 2;
}
#d5 {
position: absolute;
top: 780px;
z-index: 3;
