Hello, I have a block and when hovering over it, the "transform: scale (1.07);" with hover. The problem is that I have a site menu that is always at the top of the screen and it moves up and down a few pixels. How to fix it?

.rol-1l { display: inline-block; height: 335px; width: 290px; margin-top: 40px; margin-bottom: 100px; border: 1px solid #343535; cursor: pointer; background-color: rgba(38,38,38,.35); transition: all 0.45s ease-in-out; background-size: 270px; background-repeat: no-repeat; text-align: center; box-shadow: 0 0 10px #000; } .rol-1l:hover { /*transform: translateX(0) translateY(-20px);*/ transform: scale(1.07); box-shadow: 0 0 59px rgba(0,0,0,.4); }

Menu

 header { width: 100%; height: 100px; position: fixed; background: #060608; box-shadow: 0 1px 0 #353e4e, 0 1px 3px 1px rgba(0,0,0,.65); border-bottom: 1px solid #20252f; top: 0; left: 0; z-index: 99; }
  • Psychics live on the channel TNT. And mere mortals, to help you - you need to look at your html markup and css, and tell them what is wrong there. Therefore, edit your question, adding there everything you need - Alexey Shimansky
  • Added by. I understand that the problem is most likely due to an increase in the block size, but it is impossible to fix it - vlados
  • eheheh. And where is the html to which it all applies? - Alexey Shimansky

0