How to transition z-index?

Question

https://jsfiddle.net/vaf6nv36/1/

Can the balloons image slowly transition over the apple image?

I think that I need more transition parameters, or I should use

Answer 1

I fear z-index transition only makes the element pass step by step through every layer. To make a nice effect you need to combine it with opacity transition and scale / position transition. The fiddle to show you the idea:

.img1, .img2{

  border: 1px solid black;
    transition: 1s;
    position: absolute;
}

.img1{
    left: 25%;
    height: 500px;
    width: 500px;
    z-index: 1;
    transform: scale(0.9);
    opacity: 0.5;
    background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2{
    right: 25%;
    width: 500px;
    height: 500px;
    bottom: 0;
    z-index: 2;
    background-image:  url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img1:hover{
    animation: fronte 1s linear forwards; 
}

@keyframes fronte {
  from { z-index: 0; transform: scale(0.9); opacity: 0.5; }
  to { z-index: 4; transform: scale(1.1); opacity: 1; }
}