.box{text-align:center;background:#000;color:#fff;overflow:hidden;position:relative;transition:all .35s ease 0s}.box:before{content:"";position:absolute;top:0;left:0;bottom:0;right:100%;background:#3b5998;opacity:.4;transition:all .35s ease-in 0s}.box:hover:before{right:0;transition:all .35s ease-out 0s}.box:after{content:"";position:absolute;top:50%;left:100%;border-width:200px 200px 200px 0;border-style:solid;border-color:transparent #3b5998 transparent transparent;opacity:.9;transform:translateY(-50%);transition:all .35s ease-out 0s}.box:hover:after{left:50%;transition:all .35s ease-in .2s}.box img{width:100%;height:auto}.box:hover img{opacity:.4}.box .box-content{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}.box .title,.box .post{width:100%;padding:0 20px;margin:0;position:absolute;top:47%;left:0;font-size:22px;font-weight:700;opacity:0;transform:translate(-25%,-50%);transition:all .3s ease-out .2s}.box .post{font-size:15px;transform:translate(-25%,60%)}.box:hover .title{opacity:1;transform:translate(0,-50%);transition-delay:.7s}.box:hover .post{opacity:1;transform:translate(0,60%);transition-delay:.7s}@media only screen and (max-width:990px){.box{margin-bottom:0}}@media only screen and (max-width:767px){.box:after{border-width:800px 800px 800px 0}}