It is necessary that the hover effect appears only from the bottom of the green square, without appearing in other blocks. And yet, if we move the cursor to the place where the block appearing at hover is hidden, it starts to twitch and generally behaves strangely.

I can not understand what and how to fix it. Help plz.

.wrapper { border:1px solid red; width: 600px; height: 100px; text-align: center; background-color: #ff6600; } .block { width: 50px; height: 50px; background-color:green; display: inline-block; position: relative; } .block:hover .block__hover{ bottom:0; opacity: 1; } .block__hover { width: 100%; height: 50%; background-color: black; position: absolute; bottom: -100%; opacity: 0; transition: bottom 0.5s; } .block2{ width: 50px; height: 50px; background-color:red; margin: 0 auto; } 
 <div class="wrapper"> <div class="block"> <div class="block__hover"></div> </div> <div class="block2"></div> </div>

    1 answer 1

     .wrapper { border:1px solid red; width: 600px; height: 100px; text-align: center; background-color: #ff6600; position:relative; z-index:5; } .block { width: 50px; height: 50px; background-color:green; display: inline-block; position: relative; z-index: 2; } .block:hover .block__hover{ bottom:0; opacity: 1; } .block__hover { width: 100%; height: 50%; background-color: black; position: relative; bottom: -50%; opacity: 0; z-index: 3; transition: bottom 5.5s; } .block2{ width: 50px; height: 50px; background-color:red; margin: 0 auto; z-index: 3; position:relative; } 
     <div class="wrapper"> <div class="block"> <div class="block__hover"></div> </div> <div class="block2"> </div> </div>

    So?

    • Yeah almost. But it is necessary that the hover effect does not show up on the wrapper. I also tried it via z-index, but it would still fit on the wrapper ( - Gregory
    • @ Gregory is ready, I just slowed down for clarity - Vadim
    • seem to be. But I have a main nagger so that the block would gradually manifest itself from below, but now it appears sharply from below and smoothly goes up. Here is a screen for clarity. prntscr.com/jsv14d - Gregory