23

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
  • 6
    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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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