.grid{margin:40px auto 120px;max-width:1000px;width:100%}.grid a{float:left;width:32%;color:#333}.grid a:nth-child(2){margin:30px 0 -30px 0}.grid a:nth-child(5){margin:30px 0 -30px 0}.grid a:nth-child(8){margin:30px 0 -30px 0}.grid figure{position:relative;overflow:hidden;margin:5px;background:#333}.grid figure img{position:relative;display:block;width:100%;opacity:.7;-webkit-transition:opacity .3s;transition:opacity .3s}.grid figcaption{position:absolute;top:0;z-index:11;padding:0;width:100%;height:100%;text-align:center}.grid figcaption h3{margin:10px 0 5px 0;color:#2cabe2;text-transform:uppercase;letter-spacing:1px;font-weight:600;font-size:130%;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.grid figcaption p{padding:0 20px;color:#fff;font-weight:400;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.grid figcaption h2,.grid figcaption p{-webkit-transform:translateY(50px);transform:translateY(50px)}.grid figure button{position:absolute;padding:4px 20px;border:none;text-transform:uppercase;letter-spacing:1px;font-weight:700;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.grid figcaption,.grid figcaption h2,.grid figcaption p,.grid figure button{-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid svg{position:absolute;top:-1px;z-index:10;width:100%;height:100%}.grid svg path{fill:rgba(0,0,0,.6)}.grid a:hover figure img{opacity:1}.grid a:hover figcaption h2,.grid a:hover figcaption p{-webkit-transform:translateY(0);transform:translateY(0)}.grid a:hover figcaption p{opacity:0}.demo-1 body{background:#3498db}.demo-1 .grid figure button,.demo-3 .grid figure button{top:50%;left:50%;border:3px solid #fff;background:0 0;color:#fff;opacity:0;-webkit-transform:translateY(-50%) translateX(-50%) scale(.25);transform:translateY(-50%) translateX(-50%) scale(.25)}.demo-1 .grid a:hover figure button,.demo-3 .grid a:hover figure button{opacity:1;-webkit-transform:translateY(-50%) translateX(-50%) scale(1);transform:translateY(-50%) translateX(-50%) scale(1)}.demo-2 body{background:#e74c3c}.demo-2 .grid figcaption h2{color:#e74c3c}.demo-2 .grid figcaption p{-webkit-transition-delay:50ms;transition-delay:50ms}.demo-2 .grid figure button{bottom:0;left:0;padding:15px;width:100%;background:#fff;color:#333;font-weight:300;-webkit-transform:translateY(100%);transform:translateY(100%)}.demo-2 .grid a:hover figure button{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-transform:translateY(0);transform:translateY(0)}.demo-2 .grid figcaption h2,.demo-2 .grid figcaption p,.demo-3 .grid figcaption h2,.demo-3 .grid figcaption p{-webkit-transition-timing-function:cubic-bezier(.25,.25,.115,1);-webkit-transition-timing-function:cubic-bezier(.25,.25,.115,1.445);timing-function:cubic-bezier(.25,.25,.115,1.445)}.demo-2 .grid a:hover figcaption p,.demo-3 .grid a:hover figcaption p{-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:.1s;transition-duration:.1s}.demo-3 body{background:#52be7f}.demo-3 .grid figcaption h2{color:#52be7f}.demo-3 .grid a:hover figcaption h2{-webkit-transform:translateY(5px);transform:translateY(5px)}@media screen and (max-width:58em){.grid a{width:33.333%}.grid a:nth-child(odd){margin:0}.grid a:nth-child(3n-1){margin:30px 0 -30px 0}}@media screen and (max-width:45em){.grid{max-width:500px}.grid a{width:50%}.grid a:nth-child(3n-1){margin:0}.grid a:nth-child(even){margin:30px 0 -30px 0}.grid figcaption h2{margin-bottom:0;-webkit-transform:translateY(30px);transform:translateY(30px)}.grid figcaption p{margin:0;padding:0 10px}}@media screen and (max-width:27em){.grid{max-width:250px}.grid a{width:100%}.grid a:nth-child(even){margin:0}}