.view { width: 300px;height: 200px; overflow: hidden;position: relative;text-align:center;}
.view img { display: block; position: absolute; }
.view .mask{width:100%; height:100%; position: absolute;}
/* textes */
.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;box-shadow: 0 0 1px #000}
/* transisition */
.view-first img {transition: all 0.2s linear;}
.view-first .mask { opacity: 0;transition: all 0.8s ease-in-out;}
.view-first h2 { transform: translateY(-100px); transition: all 0.8s ease-in-out; }
.view-first p { transform: translateY(100px); transition: all 0.8s ease-in-out; }
.view-first a.info{transition: all 0.2s ease-in-out;}
/*hover */
.view-first:hover .mask {opacity: 1;}
.view-first:hover img { transform: scale(1.1);}
.view a.info:hover { box-shadow: 0 0 5px #000}
.view-first:hover h2,.view-first:hover p,.view-first:hover a.info { opacity: 1;transform: translateY(0px);}
.view-first:hover a.info { transition-delay: 0.2s;}
