Как сдвинуть картинку (см. сайт)?

margin не сработал из за этого

element.style {
    width: 822px;
    height: 397px;
    margin: 0px;
}

А это что такое?

<div class="n2-ss-layer n2-ow radius4" 
style="left: 122.292px; top: 45.74px; width: 115.067px; height: auto; overflow: visible; font-size: 100%; right: auto; bottom: auto;" datapm="absolute" data-responsiveposition="1"
data-desktopportraitleft="-350" data-desktopportraittop="-24" 
data-responsivesize="1" data-desktopportraitwidth="160" 
data-desktopportraitheight="auto" 
data-desktopportraitalign="center" data-desktopportraitvalign="middle" 
data-parentid="" 
data-desktopportraitparentalign="center" 
data-desktopportraitparentvalign="middle" 
data-sstype="layer" data-rotation="0" data-desktopportrait="1" 
data-desktoplandscape="1" data-tabletportrait="1" 
data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-adaptivefont="0" data-desktopportraitfontsize="100" data-plugin="rendered"

>
<div class=" n2-ss-img-wrapper n2-ow" style="overflow:hidden;"><a class="n2-ow zoomLink cboxElement" target="_parent" href="https://www.stomatologplus-vrn.ru/wp-content/uploads/2018/09/o6.jpg" style="float: none;"><img src="//www.stomatologplus-vrn.ru/wp-content/uploads/2018/09/o6.jpg" id="n2-ss-17item10" alt="" style="display: inline-block; max-width: 100%; width: 100%; height: auto; opacity: 1;" class=" n2-ow colorbox-355" data-no-lazy="1" data-hack="data-lazy-src"><span class="zoomHover" style="opacity: 0; margin: 0px; padding: 0px;"></span></a></div></div>

hover не заметил.

Так как анимация привязана фоном к родительскому блоку margin не поможет, используйте background-position.

.div.n2-ss-layers-container.n2-ow:hover {

     background-position: 38px 60px;

}

Спасибо, с background-position удалось переместить на нужное место.

И еще вдогонку вопрос - можно ли управлять анимацией с помощью CSS? Нужно медленное воспроизведение и повтор через 2 секунды. Или это только художник может задать эти параметры в графическом редакторе?

Можно. Правда, если избавиться от анимации в gif.

https://www.w3schools.com/css/css3_animations.asp

https://www.w3schools.com/css/css3_transitions.asp

А возможно сделать так, чтобы при наведении листья вырастали и остановились; курсор ушел - листья спрятались?

Можно через Js менять анимацию на картинку через определенное время, а потом менять обратно.

onmouseenter="setTimeout(() => {this.style.backgroundImage = 'url(путь к статической картинке)'}, 2000)";

onmouseleave="setTimeout(() => {this.style.backgroundImage = 'url(путь к гифке)'}, 0)";

Подскажите еще, пожалуйста. Заказчик хочет зациклить гифку - то есть, чтобы листья появлялись и через некоторое время убирались. Я пишу ему - пусть художник сделает то, что вам нужно. Он отвечает: "давайте своими силами".

Разве это можно с помощью кода сделать? Или только в графическом редакторе?

Для этого создаётся нескольку картинок-кадров, на которых листья разного размера. Картинки кодом никак не сделать.

Классный сайт. Еще пара итераций и на главной странице будет зубная паста выбегать и из автомата кариес расстреливать, а сверху на парашутах другие пасты спускаются.