Transformation does not work when you hover, tell me what's wrong? .menu does not expand when you hover on it

.menu { width:100px; height:100px; background:orange; transform:scale(0.5); } .menu:hover { transform:scale(1); } .show-menu { width:50px; height:50px; background:black; position:absolute; z-index:1000; top:33px; left:33px; } 
 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> <link href="about.css" rel="stylesheet" type="text/css"> </head> <body> <div class="menu"></div> <div class="show-menu"></div> </body> </html>

  • Because you reduced the menu and now it hides behind the show-menu ... so if you remove the transform:scale(0.5); you will see it right away ..... and yes the scale(1) does nothing .... it is equivalent to multiplying by 1 ...... you must write at least scale(2) or something more than 1 - Alexey Shimansky

1 answer 1

In addition to the above, the menu hides behind the show-menu due to the fact that the latter has z-index: 1000, so even if you put the menu above in html, it will still be on the bottom layer. Look at the css below. And if the scale is (0.5) it turns out you have reduced by 50%, and when hover set scale (1) - return to 100%, so in this case scale (1) works.

 .menu { width:100px; height:100px; background:orange; transform: scale(0.5); z-index:1001; } .menu:hover { transform: scale(1); transition: all 0.4s; } .show-menu { width:50px; height:50px; background:black; position:absolute; z-index:1000; top:33px; left:33px; } 
 <div class="menu"></div> <div class="show-menu"></div>