.view {
   width: 100%;
   height: 300px;
   margin: 0px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: pointer;
}
.view .mask,.view .content {
   width: 100%;
   height: 300px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 25px;
   padding: 5px;
   margin: 40px 0 0 0;
}

.view-first img,.view-second img,.view-third img,.view-fourth img,.view-fifth img,.view-sixth img,.view-seventh img {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-first .mask,.view-second .mask,.view-third .mask,.view-fourth .mask,.view-fifth .mask,.view-sixth .mask,.view-seventh .mask {
   -webkit-transform: translateX(-350px);
   -moz-transform: translateX(-350px);
   -o-transform: translateX(-350px);
   -ms-transform: translateX(-350px);
   transform: translateX(-350px);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-first:hover .mask,.view-second:hover .mask,.view-third:hover .mask,.view-fourth:hover .mask,.view-fifth:hover .mask,.view-sixth:hover .mask,.view-seventh:hover .mask {
-webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-first:hover img,.view-second:hover img,.view-third:hover img,.view-fourth:hover img,.view-fifth:hover img,.view-sixth:hover img,.view-seventh:hover img {
   -webkit-transform: translateX(350px);
   -moz-transform: translateX(350px);
   -o-transform: translateX(350px);
   -ms-transform: translateX(350px);
   transform: translateX(300px);
}
.view-first h2,.view-second h2,.view-third h2,.view-fourth h2,.view-fifth h2,.view-sixth h2,.view-seventh h2 {
 background-color: #DAE1E7;
   color: #000;
}
.view-first:hover .mask {
 background-color: #EE3B37;
}
.view-second:hover .mask {
 background-color: #679D7B;
}
.view-third:hover .mask {
 background-color: #EF7639;
}
.view-fourth:hover .mask {
 background-color: #2D3091;
}
.view-fifth:hover .mask {
 background-color: #67CEF7;
}
.view-sixth:hover .mask {
 background-color: #003399;
}
.view-seventh:hover .mask {
 background-color: #A6A5A5;
}