tell me how to shift the background of the link to which the cursor is hovered, so as not to shift the element itself and not to stretch the menu itself? Those. The background itself must go down the menu, and therefore proportionally remove the fill from the element above. I give an approximate menu that I want to change (the code is not mine, just for understanding): Example

    2 answers 2

    css to help you:

     @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } :hover { width: 560px; height: 400px; background-image: url(bg-clouds.png); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 40s linear infinite; }

    demo

    • and how does this solve the problem? I can paint over the element when hovering, but I am interested in how to shift this shading. - Denis
    • one
      @Denis connect imagination and programming. Updated post. Yes, a lot of options. You can make an animation on hover, you can just move the background and get the background of the parent. Draw what you want, give the money to the programmers they make you. - Makarenko_I_V
    • Here you can use a background image, for example, for which you can set the offset coordinates. xiper.net/collect/html-and-css-tricks/css-tricks/… - DimXenon

    Like so

     *{ margin:0; text-decoration:none; } a{ display:block; width:150px; text-align:center; height:50px; line-height:50px; background:url(http://i.artfile.ru/s/820966_180414_53_ArtFile_ru.jpg); background-size:120% 120%; color:#fefefe; font-size:20px; transition:all .5s; } a:hover{ background-position:-10px 0; } 
     <a href="#"> Главная</a>