.view {
 width: 300px;
 height: 200px;
 margin: 10px;
 float: left;
 border: 10px solid #fff;
 overflow: hidden;
 position: relative;
 text-align: center;
 box-shadow: 1px 1px 2px #e6e6e6;
 cursor: default;
 background: #fff url(https://xn--80aadn5a3alc.xn--p1ai/img/black.jpg) no-repeat center center;
 background-size:cover;
}
.view .mask, .view .content {
 width: 300px;
 height: 200px;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0;
}
.view img {
 display: block;
 position: relative;
}
.view h2 {
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 position: relative;
 font-size: 17px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.8);
 margin: 20px 0 0 0;
}
.view p {
 font-family: Georgia, serif;
 font-style: italic;
 font-size: 12px;
 position: relative;
 color: #fff;
 padding: 10px 20px 20px;
 text-align: center;
}
.view a.info {
 display: inline-block;
 text-decoration: none;
 padding: 7px 14px;
 background: #000;
 color: #fff;
 text-transform: uppercase;
 box-shadow: 0 0 1px #000;
}
.view a.info:hover {
 box-shadow: 0 0 5px #000;
} 
.view-first img {
 transition: all 0.2s linear;
}
.view-first .mask {
 opacity: 0;
 background-color: rgba(219,127,8, 0.7);
 transition: all 0.4s ease-in-out;
}
.view-first h2 {
 transform: translateY(-100px);
 opacity: 0;
 transition: all 0.2s ease-in-out;
}
.view-first p {
 transform: translateY(100px);
 opacity: 0;
 transition: all 0.2s linear;
}
.view-first a.info{
 opacity: 0;
 transition: all 0.2s ease-in-out;
}
.view-first:hover img {
 transform: scale(1.1);
}
.view-first:hover .mask {
 opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
 opacity: 1;
 transform: translateY(0px);
}
.view-first:hover p {
 transition-delay: 0.1s;
}
.view-first:hover a.info {
 transition-delay: 0.2s;
}
.view-second img {
 transition: all 0.2s ease-in;
}
.view-second .mask {
 background-color: rgba(115,146,184, 0.7);
 width: 300px;
 padding: 60px;
 height: 300px;
 opacity: 0;
 transform: translate(265px, 145px) rotate(45deg);
 transition: all 0.2s ease-in-out;
}
.view-second h2 {
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: translate(200px, -200px);
 transition: all 0.2s ease-in-out;
}
.view-second p {
 transform: translate(-200px, 200px);
 transition: all 0.2s ease-in-out;
}
.view-second a.info {
 transform: translate(0px, 100px);
 transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
 opacity:1;
 transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
 transform: translate(0px,0px);
 transition-delay: 0.3s;
}
.view-second:hover p {
 transform: translate(0px,0px);
 transition-delay: 0.4s;
}
.view-second:hover a.info {
 transform: translate(0px,0px);
 transition-delay: 0.5s;
}
.view-third img {
 transition: all 0.2s ease-in;
}
.view-third .mask {
 background-color: rgba(0,0,0,0.6);
 opacity: 0;
 transform: translate(460px, -100px) rotate(180deg);
 transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
 transform: translateY(-100px);
 transition: all 0.2s ease-in-out;
}
.view-third p {
 transform: translateX(300px) rotate(90deg);
 transition: all 0.2s ease-in-out;
}
.view-third a.info {
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
 opacity:1;
 transition-delay: 0s;
 transform: translate(0px, 0px);
}
.view-third:hover h2 {
 transform: translateY(0px);
 transition-delay: 0.5s;
}
.view-third:hover p    {
 transform: translateX(0px) rotate(0deg);
 transition-delay: 0.4s;
}
.view-third:hover a.info {
 transform: translateY(0px);
 transition-delay: 0.3s;
}
.view-fourth img {
 transition: all 0.4s ease-in-out 0.2s;
 opacity: 1;
}
.view-fourth .mask {
 background-color: rgba(0,0,0,0.8);
 opacity: 0;
 transform: scale(0) rotate(-180deg);
 transition: all 0.4s ease-in;
 border-radius: 0px;
}
.view-fourth h2{
 opacity: 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transition: all 0.5s ease-in-out;
}
.view-fourth p {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
 opacity: 0;
 transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
 opacity: 1;
 transform: scale(1) rotate(0deg);
 transition-delay: 0.2s;
}
.view-fourth:hover img       {
 transform: scale(0);
 opacity: 0;
 transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
 opacity: 1;
 transition-delay: 0.5s;
}
.view-fifth img {
 transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
 background-color: rgba(146,96,91,0.3);
 transform: translateX(-300px);
 opacity: 1;
 transition: all 0.4s ease-in-out;
}
.view-fifth h2{
 background: rgba(255, 255, 255, 0.5);
 color: #000;
 box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p{
 opacity: 0;
 color: #fff;
 transition: all 0.2s linear;
}
.view-fifth:hover .mask {
 transform: translateX(0px);
}
.view-fifth:hover img {
 transform: translateX(300px);
 transition-delay: 0.1s;
}
.view-fifth:hover p{
 opacity: 1;
 transition-delay: 0.4s;
}
.view-sixth img {
 transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask{
 background-color: rgba(146,96,91,0.5);
 opacity:0;
 transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2{
 opacity:0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: scale(10);
 transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
 opacity:0;
 transform: scale(10);
 transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
 opacity:0;
 transform: translateY(100px);
 transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
 opacity:1;
 transition-delay: 0s;
}
.view-sixth:hover img {
 transition-delay: 0s;
}
.view-sixth:hover h2 {
 opacity: 1;
 transform: scale(1);
 transition-delay: 0.1s;
}
.view-sixth:hover p {
 opacity:1;
 transform: scale(1);
 transition-delay: 0.2s;
}
.view-sixth:hover a.info {
 opacity:1;
 transform: translateY(0px);
 transition-delay: 0.3s;
}
.view-seventh img{
 transition: all 0.5s ease-out;
 opacity: 1;
}
.view-seventh .mask {
 background-color: rgba(77,44,35,0.5);
 transform: rotate(0deg) scale(1);
 opacity: 0;
 transition: all 0.3s ease-out;
 transform: translateY(-200px) rotate(180deg);
}
.view-seventh h2{
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out;
}
.view-seventh p {
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
 transform: translateY(-200px);
 transition:  all 0.2s ease-in-out;
}
.view-seventh:hover img{
 transform: rotate(720deg) scale(0);
 opacity: 0;
}
.view-seventh:hover .mask {
 opacity: 1;
 transform: translateY(0px) rotate(0deg);
 transition-delay: 0.4s;
}
.view-seventh:hover h2 {
 transform: translateY(0px);
 transition-delay: 0.7s;
}
.view-seventh:hover p {
 transform: translateY(0px);
 transition-delay: 0.6s;
}
.view-seventh:hover a.info {
 transform: translateY(0px);
 transition-delay: 0.5s;
}
.view-eighth .mask {
 background-color: rgba(255, 255, 255, 0.7);
 top: -200px;
 opacity: 0;
 transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2{
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
 color: #333;
 transform: translateY(-200px);
 transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
  transform: translateY(-200px);
 transition:  all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
 opacity: 1;
 top: 0px;
 transition-delay: 0s;
 animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
 transform: translateY(0px);
 transition-delay: 0.4s;
}
.view-eighth:hover p {
 transform: translateY(0px);
 transition-delay: 0.2s;
}
.view-eighth:hover a.info {
 transform: translateY(0px);
 transition-delay: 0s;
}
@keyframes bounceY {
 0% { transform: translateY(-205px);}
 40% { transform: translateY(-100px);}
 65% { transform: translateY(-52px);}
 82% { transform: translateY(-25px);}
 92% { transform: translateY(-12px);}
 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
.view-ninth .mask-1,.view-ninth .mask-2{
background-color: rgba(0,0,0,0.5);
height: 361px;
width: 361px;
background: rgba(119,0,36,0.5);
opacity: 1;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0px;
transform: rotate(56.5deg) translateX(-180px);
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0px;
transform: rotate(56.5deg) translateX(180px);
transform-origin: 0% 100%;
}
.view-ninth .content{
background: rgba(0,0,0,0.9);
height: 0px;
opacity: 0.5;
width: 361px;
overflow: hidden;
transform: rotate(-33.5deg) translate(-112px,166px);
transform-origin: 0% 100%;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2{
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view-ninth a.info{
display: none;
}
.view-ninth:hover .content{
height: 120px;
width: 300px;
opacity: 0.9;
top: 40px;
transform: rotate(0deg) translate(0px,0px);
}
.view-ninth:hover .mask-1,
.view-ninth:hover .mask-2{
transition-delay: 0s;
}
.view-ninth:hover .mask-1{
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
transform: rotate(56.5deg) translateX(-1px);
}
.view-ninth:hover a.info {
display:block;
}
.view-tenth img {
 transform: scaleY(1);
 transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
 background-color: rgba(255, 231, 179, 0.3);
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth h2{
 border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 background: transparent;
 margin: 20px 40px 0px 40px;
 transform: scale(0);
 color: #fff;
 transition: all 0.5s linear;
 opacity: 0;
}
.view-tenth p {
 color: #fff;
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}
.view-tenth a.info {
 opacity: 0;
 transform: scale(0);
 transition: all 0.5s linear;
}
.view-tenth:hover img {
 transform: scale(10);
 opacity: 0;
}
.view-tenth:hover .mask {
 opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
 transform: scale(1);
 opacity: 1;
}