HTML :
<figure class="snip1325"><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/ls-sample4.jpg" alt="ls-sample4"/></a></figure> <figure class="snip1325"><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/ls-sample7.jpg" alt="ls-sample7"/></a></figure> <figure class="snip1325"><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/ls-sample6.jpg" alt="ls-sample6"/></a></figure>
CSS :
.snip1325 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 255px;
max-width: 315px;
height: 220px;
width: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snip1325 img {
height: 100%;
position: absolute;
right: 0;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
max-width: none;
}
.snip1325:hover img {
-webkit-transform: translateX(130px);
transform: translateX(130px);
}
