How to create a copy of and image, move and scale using CSS

I have an AngularJS app and I have an image with an "Add to cart" button. What I would like to happen is that the image is copied and moved (and scaled down) to the top of the page when there is a shopping cart icon. Does anyone know where I would find a solution for this?

My current CSS half works. It moves the image to the top left of the image's div and makes the image smaller. What I would like it to do is take the image to the shopping cart div that is sitting at the top of the page.

.slideOutUp:hover {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  transform-origin: left top;   
  }
  }
  @keyframes slideOutUp {
  0% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  100% {
  visibility: hidden;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  transform-origin: left top;
  }
  }