figure.effect-dexter {
background: -webkit-linear-gradient(top, rgba(37, 141, 200, 1) 0, rgba(104, 60, 19, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(37, 141, 200, 1)), to(rgba(104, 60, 19, 1)));
background: linear-gradient(to bottom, rgba(37, 141, 200, 1) 0, rgba(104, 60, 19, 1) 100%)
}
figure.effect-dexter img {
-webkit-transition: opacity .35s;
transition: opacity .35s
}
figure.effect-dexter:hover img {
opacity: .4
}
figure.effect-dexter figcaption::after {
position: absolute;
right: 25px;
bottom: 25px;
left: 25px;
height: -webkit-calc(50% - 25px);
height: calc(50% - 25px);
border: 7px solid #fff;
content: '';
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
figure.effect-dexter:hover figcaption::after {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
figure.effect-dexter figcaption {
padding: 3em;
text-align: left
}
figure.effect-dexter .effect-description {
position: absolute;
right: 60px;
bottom: 60px;
left: 60px;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(0, -100px, 0);
-ms-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0)
}
figure.effect-dexter:hover .effect-description {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}