body {
    background: black;
}
#wrapper {
    width: 670px;
    background: gray;
    text-align: center;
    padding: 10px 0 3px 0;
}
a {
    text-decoration: none;
    display: inline-block;
    width: 206px;
    height: 100px;
    margin: 5px;
    position: relative;
}
img {
    width: 200px;
    border: 3px solid black;
}
img:hover {
    -webkit-animation: shake 0.5s;
}
a:active img{
    position: absolute;
    z-index: 1;
    -webkit-transform: translate(-100px, 0);
    -webkit-animation: expand 2s;
}

@-webkit-keyframes shake {
    0%   {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }
    10%  {
        -webkit-transform: translate(-2px, -2px) rotate(-2deg);
    }
    20%  {
        -webkit-transform: translate(2px, 2px) rotate(2deg);
    }
    30%  {
        -webkit-transform: translate(-2px, -2px) rotate(-2deg);
    }
    40%  {
        -webkit-transform: translate(2px, 2px) rotate(2deg);
    }
    50%  {
        -webkit-transform: translate(-2px, -2px) rotate(-2deg);
    }
    60%  {
        -webkit-transform: translate(2px, 2px) rotate(2deg);
    }
    70%  {
        -webkit-transform: translate(-2px, -2px) rotate(-2deg);
    }
    80%  {
        -webkit-transform: translate(2px, 2px) rotate(2deg);
    }
    90%  {
        -webkit-transform: translate(-2px, -2px) rotate(-2deg);
    }
    100% {
        -webkit-transform: translate(2px, 2px) rotate(-2deg);
    }
}

@-webkit-keyframes expand {
  0%   {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
  25%  {
    -webkit-transform: translate(200px, 200px) rotate(0deg);
    width: 400px;
    height: 200px;
  }
  50%  {
    -webkit-transform: translate(200px, 200px) rotate(360deg);
    width: 400px;
    height: 200px;
  }
  100% {
    -webkit-transform: translate(-100px, 0px);
  }
}