/* CSS3 EFFECTS */
.view {
   
   
   overflow: hidden;
   position: relative;
   text-align: center!important;
   
   cursor: default;
}
.view .mask, .view .info{
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;   
}
.view .info img{
   display: none;
}
.view > img {
   height: 100% !important;
   display: block;
   position: relative;
}

/* THIRD EFFECTS */

.third-effect .mask {
   width:0;
   height:237px;
   transition:width 1s;
   -moz-transition:width 1s; /* Firefox 4 */
   -webkit-transition:width 1s; /* Safari and Chrome */
   -o-transition:width 1s; /* Opera */
   display: block;
}
.view:hover .info img{
   display: block;
   position: absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%); /* Firefox 4 */
   -webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
   -o-transform:translate(-50%,-50%); /* Opera */
   
}

/* .third-effect .info {   
   opacity: 0;
   -webkit-transition: opacity 0.5s 0s ease-in-out;
   -moz-transition: opacity 0.5s 0s ease-in-out;
   -o-transition: opacity 0.5s 0s ease-in-out;
   -ms-transition: opacity 0.5s 0s ease-in-out;
   transition: opacity 0.5s 0s ease-in-out;
} */

/* .third-effect:hover .info {   
   opacity:1;
   -moz-transition-delay: 0.3s;
   -webkit-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
} */