figure.effect-phoebe {
background: #675983
}
figure.effect-phoebe img {
opacity: .85;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-phoebe:hover img {
opacity: .6
}
figure.effect-phoebe figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-background-size: 115% 115%;
background-size: 115% 115%;
content: '';
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale3d(5, 2.5, 1);
-ms-transform: scale3d(5, 2.5, 1);
transform: scale3d(5, 2.5, 1);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
figure.effect-phoebe:hover figcaption::before {
opacity: .6;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
figure.effect-phoebe h2 {
margin-top: 1em !important;
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: translate3d(0, 40px, 0);
-ms-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0)
}
figure.effect-phoebe:hover h2 {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-phoebe .effect-description {
color: #fff;
font-size: 15px;
opacity: 0;
position: relative;
display: inline-block;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
figure.effect-phoebe:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-phoebe .effect-description a:first-child {
-webkit-transform: translate3d(-60px, -60px, 0);
-ms-transform: translate3d(-60px, -60px, 0);
transform: translate3d(-60px, -60px, 0)
}
figure.effect-phoebe .effect-description a:nth-child(2) {
-webkit-transform: translate3d(0, 60px, 0);
-ms-transform: translate3d(0, 60px, 0);
transform: translate3d(0, 60px, 0)
}
figure.effect-phoebe .effect-descriptiona:nth-child(3) {
-webkit-transform: translate3d(60px, -60px, 0);
-ms-transform: translate3d(60px, -60px, 0);
transform: translate3d(60px, -60px, 0)
}
figure.effect-phoebe:hover .effect-description a {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}