figure.effect-steve {
z-index: auto;
overflow: visible;
background: #000
}
figure.effect-steve h2:before,
figure.effect-steve:before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #000;
content: '';
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-steve:before {
-webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, .8);
box-shadow: 0 3px 30px rgba(0, 0, 0, .8);
opacity: 0
}
figure.effect-steve figcaption {
z-index: 1
}
figure.effect-steve img {
opacity: 1;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: perspective(1000px) translate3d(0, 0, 0);
-ms-transform: perspective(1000px) translate3d(0, 0, 0);
transform: perspective(1000px) translate3d(0, 0, 0)
}
figure.effect-steve h2,
figure.effect-steve .effect-description {
background: #fff;
color: #2d434e !important
}
figure.effect-steve h2 {
position: relative;
margin-top: 2em;
padding: .25em
}
figure.effect-steve h2:before {
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
box-shadow: 0 1px 10px rgba(0, 0, 0, .5)
}
figure.effect-steve .effect-description {
margin-top: 1em !important;
padding: .5em;
font-weight: 800;
font-size: 14px;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale3d(0.9, .9, 1);
-ms-transform: scale3d(0.9, .9, 1);
transform: scale3d(0.9, .9, 1)
}
figure.effect-steve:hover:before {
opacity: 1
}
figure.effect-steve:hover img {
-webkit-transform: perspective(1000px) translate3d(0, 0, 21px);
-ms-transform: perspective(1000px) translate3d(0, 0, 21px);
transform: perspective(1000px) translate3d(0, 0, 21px)
}
figure.effect-steve:hover h2:before {
opacity: 0
}
figure.effect-steve:hover .effect-description {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}