figure {
width: 350px;
height: 240px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

figure figcaption,
figure figcaption img{
width: 350px;
height: 240px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform:    translateX(-350px);
-o-transform:      translateX(-350px);
-webkit-transform: translateX(-350px);
transform:         translateX(-350px);
  
visibility:hidden;  

-webkit-transition: all 0.4s ease-out; 
   -moz-transition: all 0.4s ease-out; 
    -ms-transition: all 0.4s ease-out; 
     -o-transition: all 0.4s ease-out; 
        transition: all 0.4s ease-out;
}

figure img {
display: block;
position: relative;
    
-webkit-transition: all 0.4s ease-out; 
   -moz-transition: all 0.4s ease-out; 
    -ms-transition: all 0.4s ease-out; 
     -o-transition: all 0.4s ease-out; 
        transition: all 0.4s ease-out;
}

figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 17px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}

figure p {
font-size: 12px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
    
-webkit-transition: all 0.4 ease-out; 
   -moz-transition: all 0.4 ease-out; 
    -ms-transition: all 0.4 ease-out; 
     -o-transition: all 0.4 ease-out; 
        transition: all 0.4 ease-out;
}

figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}

figure a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}

figure:hover figcaption,
figure:hover figcaption img{
-moz-transform:    translateX(0);
-o-transform:      translateX(0);
-webkit-transform: translateX(0);
transform:         translateX(0);
visibility:visible;
}

figure:hover img {
-moz-transform:    translateX(350px);
-o-transform:      translateX(350px);
-webkit-transform: translateX(350px);
transform:         translateX(350px);
}

figure:hover p{
opacity: 1;
}