.box{
    overflow: hidden  ;
    position: relative;
}
.box img{
    width: 100%;
    height: auto;
}
.box:hover img{
    opacity: 0.3;
}
.box .box-inner{
    width   : 90%;
    height  : 90%;
    position: absolute;
    top     : 5%;
    left    : 5%;
    opacity : 0 ;
    -moz-transition: all 0.01s linear 0s;
    -webkit-transition: all 0.01s linear 0s;
    -o-transition: all 0.01s linear 0s;
    -ms-transition: all 0.01s linear 0s;
    transition: all 0.01s linear 0s;
}
.box:hover .box-inner{
    opacity: 1;
}
.box .border{
    background: #000;
    position  :         absolute;
    -moz-transition:    all 0.4s linear 0s;
    -o-transition:      all 0.4s linear 0s;
    -ms-transition:     all 0.4s linear 0s;
    -webkit-transition: all 0.4s linear 0s;
    transition:         all 0.4s linear 0s;
}
.box:hover .border-top,
.box:hover .border-left,
.box:hover .border-bottom,
.box:hover .border-right{
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.box .border-top{
    width : 100%;
    height: 2px ;
    top   : 0   ;
    left  : 2px ;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
.box .border-left{
    width : 2px ;
    height: 100%;
    bottom: 0   ;
    left  : 0   ;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
.box .border-bottom{
    width : 100%;
    height: 2px ;
    bottom: 0   ;
    right : 2px ;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
}
.box .border-right{
    width : 2px ;
    height: 100%;
    top   : 0   ;
    right : 0   ;
    -moz-transform-origin: right top;
    -o-transform-origin: right top;
    -ms-transform-origin: right top;
    -webkit-transform-origin: right top;
    transform-origin: right top;
}
.box .box-content{
    width      : 100%;
    height     : 100%;
    position   : absolute;
    top        : 0;
    left       : 0;
    text-align : center ;
    color      : white  ;
    opacity    : 0;
    -moz-transform: scale(0);
    -o-transform  : scale(0);
    -ms-transform : scale(0);
    -webkit-transform: scale(0);
    transform     : scale(0);
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.box:hover .box-content{
    opacity: 1;
    -moz-transform: scale(1);
    -o-transform  : scale(1);
    -ms-transform : scale(1);
    -webkit-transform: scale(1);
    transform     : scale(1);
    -moz-transition-delay: 0.65s;
    -ms-transition-delay : 0.65s;
    -webkit-transition-delay: 0.65s;
    -o-transition-delay  : 0.65s;
    transition-delay     : 0.65s;
}
.box .title{
    background-color: #2F4F4F;
    width : 90%       ;
    margin: 10% auto 0;
    font-size  : 1.2em;
    font-weight: 300  ;
    text-transform: uppercase;
    padding    : 5px 0   ;
    position   : relative;
    color      :white    ;  
}
.box .description{
    background-color: #2F4F4F;
    text-align : left        ;
    width      : 90%         ;
    margin     : 1rem auto 0 ;
    padding    : 10px        ;
    font-size  : 1.2em       ;
    line-height: 1.1em       ;
    color      : white       ;
}
@media only screen and (max-width:360px){
.box .title{ margin: 10% auto 0; }
}
@media only screen and (max-width:359px){
    .box .description{ margin: 25px auto 0; }
}

@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}