Image transition on hover

by luissanchezm86

HTML

<div class='cards left' style='width:500px;'>
    <div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div>
</div>

<div class='cards right' style='width:500px; position:relative; top:100px;'>
    <div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div>
</div>

<div class='cards left' style='width:500px; position:relative; top:200px;'>
    <div>
        <img src='http://placekitten.com/90/90' />
    </div><div>
        <img src='http://placekitten.com/90/90' />
    </div>
</div>

CSS

img {
  width: 90px;
  position: absolute;
}

.cards {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.cards.right {
  float: right;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.cards div {
  position: relative;
  max-width: 90px;
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 0 2 90px;
  -ms-flex: 0 2 90px;
  flex: 0 2 90px;
  -webkit-transition: padding .3s;
  transition: padding .3s;
}

.cards.left div:last-child, .cards.right div:first-child {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 0 90px;
  -ms-flex: 0 0 90px;
  flex: 0 0 90px;
}

.cards.left div:not(:last-child):hover, .cards.right div:hover + div {
  padding-right: 15%;
}