logo

Transitions 2

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

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *