.view {

   width: 180px;

   height: 120px;

   margin: 10px;

   float: right;

   border: 10px solid #5bb136;

   border-radius:2px;

   overflow: hidden;

   position: relative;

   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;

   background: #fff url('../images/bgimg.jpg') no-repeat center center;

}

.view .mask,.view .content {

   width: 180px;

   height: 120px;

   position: absolute;

   overflow: hidden;

   top: 0;

   left: 0;

}

.view img {

   display: block;

   position: relative;

    height: 120px;

    width:180px;

}

.view h2 {

   color: #fff;

   text-align: center;

   position: relative;

   font-size: 17px;

   padding: 10px;

   background: rgba(0, 0, 0, 0.8);

   margin: 0 0 0 0;

}

.view p {

   font-family: Georgia, serif;

   font-style: italic;

   font-size: 12px;

   position: relative;

   color: #000000;

   padding: 0px 10px 0;

   text-align: center;

}

.view a.info {

   display: inline-block;

   text-decoration: none;

   padding: 3px 10px;

   background: #5bb136;

   color: #fff;

   text-transform: uppercase;

   -webkit-box-shadow: 0 0 1px #000;

   -moz-box-shadow: 0 0 1px #000;

   box-shadow: 0 0 1px #000;

   margin-top:-12px;

   font-weight: bold;

border-radius: 4px;

}

.view a.info: hover {

   -webkit-box-shadow: 0 0 5px #000;

   -moz-box-shadow: 0 0 5px #000;

   box-shadow: 0 0 5px #000;

}



.view-fifth 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-fifth .mask {

   background-color: #ffffff;

   -webkit-transform: translateX(-300px);

   -moz-transform: translateX(-300px);

   -o-transform: translateX(-300px);

   -ms-transform: translateX(-300px);

   transform: translateX(-300px);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -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-fifth h2 {

   background: #000000;

   color: #fff;

   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);

   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);

   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);

}

.view-fifth p {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   color: #333;

   -webkit-transition: all 0.2s linear;

   -moz-transition: all 0.2s linear;

   -o-transition: all 0.2s linear;

   -ms-transition: all 0.2s linear;

   transition: all 0.2s linear;

   font-family: Alef Hebrew;

font-size: 14px;

color: #000000;

}

.view-fifth:hover .mask {

   -webkit-transform: translateX(0px);

   -moz-transform: translateX(0px);

   -o-transform: translateX(0px);

   -ms-transform: translateX(0px);

   transform: translateX(0px);

}

.view-fifth:hover img {
   -webkit-transform: translateX(300px);
   -moz-transform: translateX(300px);
   -o-transform: translateX(300px);
   -ms-transform: translateX(300px);
   transform: translateX(300px);
}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}