figure.effect-ls-band {
color: #fff;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 100%;
color: #000000;
text-align: center;
}
figure.effect-ls-band * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.effect-ls-band img {
opacity: 1;
width: 100%;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-ls-band:after {
background: #ffffff;
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
content: '';
opacity: 0.75;
-webkit-transform: skew(-45deg) scaleX(0);
transform: skew(-45deg) scaleX(0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
figure.effect-ls-band figcaption {
position: absolute;
top: 50% !important;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
height: unset !important;
}
figure.effect-ls-band h2,
figure.effect-ls-band .effect-description {
margin: 0;
width: 100%;
opacity: 0;
color: #000 !important;
}
figure.effect-ls-band h2 {
padding: 0 30px;
display: inline-block;
font-weight: 400;
text-transform: uppercase;
}
figure.effect-ls-band .effect-description {
padding: 0 50px;
font-size: 0.8em;
font-weight: 500;
}
figure.effect-ls-band a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.effect-ls-band:hover:after,
figure.effect-ls-band.hover:after {
-webkit-transform: skew(-45deg) scaleX(1);
transform: skew(-45deg) scaleX(1);
transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.effect-ls-band:hover figcaption h2,
figure.effect-ls-band.hover figcaption h2,
figure.effect-ls-band:hover figcaption .effect-description,
figure.effect-ls-band.hover figcaption .effect-description {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
figure.effect-ls-band:hover figcaption h2,
figure.effect-ls-band.hover figcaption h2 {
opacity: 1;
}
figure.effect-ls-band:hover figcaption .effect-description,
figure.effect-ls-band.hover figcaption .effect-description {
opacity: 0.7;
}