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); }