Moving images

by Bianca Kuehweidner

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 hover"><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;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  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;
}
.snip1325:hover img,
.snip1325.hover img {
  -webkit-transform: translateX(130px);
  transform: translateX(130px);
}
/* Demo purposes only */
body {
  background-color: #212121;
}

JavaScript

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);