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 opacity?
Can someone help me?
HTML:
<div class="img1">
</div>
<div class="img2">
</div>
CSS:
.img1, .img2{
border: 1px solid black;
transition: 1s;
position: absolute;
}
.img1{
left: 25%;
height: 500px;
width: 500px;
z-index: 1;
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{
z-index: 999;
}