Trading places with css animation

Question

I am working on css scaling on hover that I cannot completely nail. I think this can be done with help transform scale(), but I have the main flicker due to the fact that the focus is easily lost on hover. Not to mention that the effect that I want to achieve does not work well for a single image. So let me explain what I'm trying to do.

I have 2 phones overlapping each other. Ideally, the background should be less 10%to achieve a depth perception effect. When I am over what is in the background, it should appear in front and trade z-indexplaces, increase the scale to 100%, and reduce the other by 10%(again for the percentage effect).

The same effect will happen when I hang over the one that I sent back, he must return to the front, where he was before and so on.

I will accept Javascript, but I would prefer a clean CSS solution if jQuery / JS is not valid.

Here is the HTML

<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

And CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
body {
  background: #202020;
  font-family: 'Roboto', sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  position: relative;
}

.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
}

.elem {
  margin-left: 130px;
  margin-top: 20px;
}

.elem:hover {
  zoom: 50%;
  -ms-transform: scale(2, 3);
  /* IE 9 */
  -webkit-transform: scale(2, 3);
  /* Safari */
  transform: scale(2, 3);
}

.elem2:hover {
  zoom: 150%;
  -ms-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
}

And CODEPEN

Thanks!

Answer 1

First: pure CSS JS Fiddle 1 - updated 2 , I removed the CSS prefix, but for simplicity

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
    body {
      background: #202020;
      font-family: 'Roboto', sans-serif;
    }
    .wrap {
      width: 50%;
      margin: 0 auto;
      position: relative;
      z-index: 100;
    }
    .wrap img {
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
    }
    .elem {
      margin-left: 130px;
      margin-top: 20px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    .elem2 {
      z-index: 10000;
      transition: margin-left, transform 0.3s;
    }
    .elem:hover {
      zoom: 50%;
      margin-left: 500px;
      margin-top: 200px;
      transform: scale(3, 3);
      z-index: 100000;
      transition: transform 0.3s;
    }
    .elem2:hover {
      zoom: 150%;
      margin-left: -50px;
      transform: scale(1.1, 1.1);
      transition: margin-left, transform 0.3s;
    }

<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

Run codeHide result

---

UPDATE:

Secondly: using jQuery .animate()and functions .css()- smoother animation for the .elemphone behind, as well as more browser support

JS Fiddle 2

var elem = $('.elem'),
  elemW = elem.width(),
  elemH = elem.height(),
  elem2 = $('.elem2'),
  elem2W = elem2.width(),
  elem2H = elem2.height();

elem.hover(function() {
  $(this).css({'z-index': '100000'}).animate({
    width: 1.5 * elemW,
    height: 1.5 * elemH,
    marginTop: '-10',
    marginLeft: '80'
  }, 300);
}, function() {
  $(this).css({'z-index': '1000'}).animate({
    width: elemW,
    height: elemH,
    marginTop: '20',
    marginLeft: '130'
  });
});

elem2.hover(function() {
  $(this).animate({
    width: 1.5 * elem2W,
    height: 1.5 * elem2H,
    marginLeft: '-50'
  }, 300);
}, function() {
  $(this).animate({
    width: elem2W,
    height: elem2H,
    marginLeft: '0'
  });
});