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;
}
Although theoretically you can transition z-index
, it wouldn't make much sense, ie 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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.