.reactiveGridTypeGinie {
padding: 0;
}
.reactiveGridTypeGinie .reactiveGridDetails {
position: relative;
height: 100%;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridImage {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative; overflow: hidden;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridImage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridImage .overlay {
background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.9) 85%
);
background: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.9) 85%
);
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.9) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#00000000',
endColorstr='#e6000000',
GradientType=0
);
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
opacity: 1;
visibility: visible;
z-index: 1;
transform-origin: bottom center;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridImage img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
-webkit-transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridContents {
padding: 0 20px;
position: absolute;
bottom: 5%;
z-index: 2;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridContents .reactiveProductTitle {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 300;
margin: 0;
line-height: 1.25;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridContents .reactiveProductSubtitle {
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
line-height: 1.5;
padding: 7px 0 5px;
display: flex;
letter-spacing: .5px;
opacity: .9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reactiveGridTypeGinie .reactiveGridDetails .reactiveGridContents .reactiveProductDetails {
margin-bottom: 0;
color: #e8e8e8;
font-size: 13px;
font-weight: 400;
overflow: hidden;
max-height: 0;
opacity: 0;
line-height: 1.5;
transition: max-height 0.9s ease, opacity 1.2s ease;
text-shadow: 0 1px 2px #000, 0 0 0;
}
.reactiveGridTypeGinie:hover .reactiveGridImage .overlay {
transform: scaleY(2);
opacity: 0.8;
}
.reactiveGridTypeGinie:hover .reactiveGridImage img {
transform: scale(1.0125);
}
.reactiveGridTypeGinie:hover .reactiveGridContents .reactiveProductDetails {
max-height: 4rem;
opacity: 1;
}