Странное поведение background-position

195

07 июня 2018, 00:50

Хотел сделать простенькую анимацию при наведении на блок. Думал сделать все через движение фона и не лезть никуда дальше. В общем при достаточной высоте вьюпорта background-position работает как мне нужно, так есть перемещает картинку за пределы блока при позиции 130%, но при блоках меньшего размера картинка вместо того что бы идти вниз уходит вверх. Я никак не могу понять почему. Я создал интерактивный пример:

https://jsfiddle.net/Telion/g3h372mx/1/

setInterval(() => { 
	$("#d").toggleClass("active"); 
}, 2000);

body { 
  height: 20px; 
} 
body>div { 
  background-image: url(https://cdn130.picsart.com/254265053013212.png); 
  background-repeat: no-repeat; 
  background-size: 350px 350px; 
  background-position: -100px 200%; 
   
  width: 300px; 
  height: 400px; 
  background-color: #000; 
  transition: 0.5s; 
} 
 
.active { 
  height: 250px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="d"></div>

Не поскажете почему это происходит и можно ли это исправить не изменяя подход к задаче?

Правка: Наверное стоит добавить причину. При наведении на блок будет происходить что-то такое: https://jsfiddle.net/Telion/g3h372mx/3/

Answer 1

Так?

body { 
  height: 20px; 
} 
body>div { 
  background-image: url(https://cdn130.picsart.com/254265053013212.png); 
  background-repeat: no-repeat; 
  background-size: 350px 350px; 
  background-position: -100px calc(100% + 100px); 
   
  width: 300px; 
  height: 250px; 
  background-color: #000; 
  transition: 0.5s; 
} 
 
body>div:hover { 
  width: 500px; 
  background-size: 370px 370px; 
  background-position: -80px calc(100% + 30px); 
}

<div id="d"></div>

Answer 2

Скорей всего проблема в неправильном background-position во втором примере я поставил background-position: -80px 290%; и картинка стала уезжать в низ как и должна. Подберите правильный вариант позиции для анимации.