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

12
Mahol
На сайте с 20.11.2016
Offline
66
4214

Всем доброго вечера.

Сделал на сайте воспроизведение анимации при наведении на блок. Не пойму, как подвинуть эту самую анимацию?

Код воспроизведения:

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

display:block;
margin: 20px 0 0 200px;
z-index:100;
visibility: visible;
background:url('https://www.stomatologplus-vrn.ru/wp-content/uploads/2019/04/Bez-imeni.gif') no-repeat;
}

То есть, margin не сработал почему-то. Нужно, чтобы анимация как бы вылезала из-под отзыва.

jpg 183263.jpg
SS
На сайте с 15.12.2015
Offline
62
#1

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>
Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
SS
На сайте с 15.12.2015
Offline
62
#2

hover не заметил.

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

Sevix
На сайте с 24.10.2011
Offline
78
#3


.div.n2-ss-layers-container.n2-ow:hover {
background-position: 38px 60px;
}
Mahol
На сайте с 20.11.2016
Offline
66
#4

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

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

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

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

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

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

Mahol
На сайте с 20.11.2016
Offline
66
#6

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

SS
На сайте с 15.12.2015
Offline
62
#7

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

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

onmouseleave="setTimeout(() => {this.style.backgroundImage = 'url(путь к гифке)'}, 0)";
Mahol
На сайте с 20.11.2016
Offline
66
#8

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

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

S
На сайте с 30.09.2016
Offline
469
#9
Mahol:
гифку - то есть, чтобы листья появлялись и через некоторое время убирались.

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
melkozaur
На сайте с 06.04.2010
Offline
496
#10

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

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий