figure.effect-sarah {
background: #42b078
}
figure.effect-sarah img {
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(-10px, 0, 0);
-ms-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden
}
figure.effect-sarah:hover img {
opacity: .4;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-sarah figcaption {
text-align: left
}
figure.effect-sarah h2 {
position: relative;
overflow: hidden;
padding: .5em 0
}
figure.effect-sarah h2::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
figure.effect-sarah:hover h2::after {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-sarah .effect-description {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
figure.effect-sarah:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}