There are several cards, they partially lie on each other. How to make it so that when you hover on a card, it appears in front of all the cards smoothly, and not quickly?
- I think your code will help you figure out what is not working for you. - klifort
- stackoverflow.com/questions/46384799/how-to-transition-z-index - Timur Musharapov
|
1 answer
Animation z-index effect will not give. You can use, for example, opacity . Depends on the purpose of these blocks.
.card { width: 200px; height: 100px; position: absolute; } .card.first { top: 0; left: 0; z-index: 2; background: green } .card.second { top: 50px; left: 100px; z-index: 1; background: blue } .card.second.shadow { z-index: 3; opacity: 1; transition: .5s } .cards:hover .card.second.shadow { opacity: 0 } <div class="cards"> <div class="card first"></div> <div class="card second"></div> <div class="card second shadow"></div> </div> 
Nikita Umnov Nikita Umnov
1,298 2 15
|