22

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;
}
2
  • 3
    Opacity is probably the way to go.
    – RaminS
    Commented Sep 23, 2017 at 22:29
  • 3
    What would a transition on z-index do? It's either in front of it, or it's not.
    – glennsl
    Commented Sep 23, 2017 at 22:30

3 Answers 3

16

Although theoretically you can transition z-index, it wouldn't make much sense, i.e. would not result in the crossfade effect which you obviously are looking for: z-index values are integers, which - when you change them in the smallest possible steps (integers, no commas) - results in states either before the other one OR behind the other one - no transitional "half states" in between. If you want to do a kind of continuous crossfade between two elements, you should use a transition on opacity.

In your particular case, since your DIVs are not directly above each other, but only overlap each other, you can solve that by having a second DIV identical to img2 (I called its class .img3), but with z-index: 0 and this CSS rule:

.img1:hover + .img2 {
  opacity: 0;
}

This will fade out img2, but still show img3, which however is behind img1, creating the impression of a transition between img1 and img2.

https://jsfiddle.net/2a2epLfv/1/

.img1,
.img2,
.img3 {
  border: 1px solid black;
  transition: 1s;
  position: absolute;
}

.img1 {
  left: 20%;
  height: 300px;
  width: 300px;
  z-index: 1;
  background-image: url(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2,
.img3 {
  right: 20%;
  width: 300px;
  height: 300px;
  top: 100px;
  background-image: url(https://i.pinimg.com/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg);
}

.img2 {
  z-index: 2;
}

.img3 {
  z-index: 0;
}

.img1:hover+.img2 {
  opacity: 0;
}
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>

5
  • You can't transition z-index This is wrong, z-index is a valid property to apply a transition to.
    – TylerH
    Commented Sep 26, 2017 at 0:33
  • @Johannes Yes, I read your whole answer. The part I referenced is still incorrect. It's odd that you said it and then went on to contradict yourself by describing how transitioning z-index works.
    – TylerH
    Commented Sep 26, 2017 at 0:43
  • @TylerH I wrote that it doesn't make sense, meaning it wouldn't result in the crossfade effect which the OP wanted to have. Anyway, i found a solution for him. But I'll add something so that everybody can be happy...
    – Johannes
    Commented Sep 26, 2017 at 0:46
  • 5
    One valid use case for transitioning z-index is when you simply want to delay the value change (e.g. after finishing an opacity transition). You can use the transition-delay setting for such use cases. This offers a CSS-based approach with having to get into javascript timers. Commented Sep 8, 2018 at 20:26
  • @nextgentech that's actually what I just needed to "transition" z-index for.. I wanted it to happen after a certain transition-delay.
    – Igor
    Commented Oct 19, 2022 at 21:35
4

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; }
}
<div class="img1">
</div>
<div class="img2">
</div>

3

This is the trick I used.

.minus{animation:move 2s;animation-fill-mode:forwards;animation-delay:2s;}

@-webkit-keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% { z-index:-1;opacity:1}
}
@keyframes move {
  0 {z-index:1;opacity:1}
  50% {opacity:0}
  100% {z-index:-1;opacity:1}
}

#main{background:red;width:100vw;height:100vh;position:fixed;top:0;left:0;opacity:.9}
.minus{position:fixed;top:10px;left:10px;z-index:1;color:#000}
<div id="main"></div>
<div class="minus">FADE</div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.