.view {
  padding:0px;
  margin: 0px;
  margin-right: 15px;
  float: left;
  overflow: hidden;
  position: relative;
  z-index: 1;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}
.view:hover{
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color=#000000)";/*IE 8*/
  -moz-box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);/*FF 3.5+*/
  -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.4);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color=#000000); /*IE 5.5-7*/
}
.view .mask,.view .content {
 width: 100%;
 height: 100%;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0;
}
.view img {
 display: block;
 position: relative;
}
.view h4 {
 text-transform: uppercase;
 color: #fff;
 text-align: center;
 position: relative;
 font-size: 17px;
 margin: 10px 0px;
}
.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 15px 6px;
 color: #fff;
 font-size: 14px;
 text-transform: uppercase;
 -webkit-transition: all 0.3s ease-in-out 0.6s;
 -moz-transition: all 0.3s ease-in-out 0.6s;
 -o-transition: all 0.3s ease-in-out 0.6s;
 transition: all 0.3s ease-in-out 0.6s;
}
.view a.info:hover {
 -webkit-box-shadow: 0 0 5px #000;
 -moz-box-shadow: 0 0 5px #000;
 box-shadow: 0 0 5px #000;
 background: rgba(0, 0, 0, 1);
}
/* NINTH EXAMPLE*/
.view-ninth .mask-1, .view-ninth .mask-2 {
  background-color: rgba(0, 0, 0, 0.5);
  height: 166%;
  width: 80%;
  background: rgba(203, 92, 0, 0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out 0.6s;
  -moz-transition: all 0.3s ease-in-out 0.6s;
  -o-transition: all 0.3s ease-in-out 0.6s;
  transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
  left: auto;
  right: 0;
  -webkit-transform: rotate(53.4deg) translateX(-180px);
  -moz-transform: rotate(53.4deg) translateX(-180px);
  -o-transform: rotate(53.4deg) translateX(-180px);
  -ms-transform: rotate(53.4deg) translateX(-180px);
  transform: rotate(53.4deg) translateX(-180px);
  -webkit-transform-origin: 100% 0%;
  -moz-transform-origin: 100% 0%;
  -o-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
  top: auto;
  bottom: 0;
  -webkit-transform: rotate(53.4deg) translateX(180px);
  -moz-transform: rotate(53.4deg) translateX(180px);
  -o-transform: rotate(53.4deg) translateX(180px);
  -ms-transform: rotate(53.4deg) translateX(180px);
  transform: rotate(53.4deg) translateX(180px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}
.view-ninth .content {
  background: rgba(0, 0, 0, 0.9);
  height: 0;
  width: 300px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
  overflow: hidden;
  -webkit-transform: rotate(-36.5deg) translate(-90px, 120px);
  -moz-transform: rotate(-36.5deg) translate(-90px, 120px);
  -o-transform: rotate(-36.5deg) translate(-90px, 120px);
  -ms-transform: rotate(-36.5deg) translate(-90px, 120px);
  transform: rotate(-36.5deg) translate(-90px, 120px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transition: all 0.4s ease-in-out 0.3s;
  -moz-transition: all 0.4s ease-in-out 0.3s;
  -o-transition: all 0.4s ease-in-out 0.3s;
  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:hover .content {
  height: 48px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  opacity: 0.9;
  top: 50%;
  margin-top: -25px;
  -webkit-transform: rotate(0deg) translate(0, 0);
  -moz-transform: rotate(0deg) translate(0, 0);
  -o-transform: rotate(0deg) translate(0, 0);
  -ms-transform: rotate(0deg) translate(0, 0);
  transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
  -webkit-transform: rotate(53.5deg) translateX(1px);
  -moz-transform: rotate(53.5deg) translateX(1px);
  -o-transform: rotate(53.5deg) translateX(1px);
  -ms-transform: rotate(53.5deg) translateX(1px);
  transform: rotate(53.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
  -webkit-transform: rotate(53.5deg) translateX(-1px);
  -moz-transform: rotate(53.5deg) translateX(-1px);
  -o-transform: rotate(53.5deg) translateX(-1px);
  -ms-transform: rotate(53.5deg) translateX(-1px);
  transform: rotate(53.5deg) translateX(-1px);
}