Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.
Уберите position: relative; из .box
Но вообще, я бы советовал использовать что-то вроде tippyjs так как все эти трюки с позиционированием могут аукнуться.
Градиент нельзя анимировать, хотя может через переменные уже как-то можно выкрутиться. Знаю несколько вариантов, в зависимости от того какая анимация нужна. Можно сместить позицию таким образом:
Либо наложить поверх невидимый градиент, чтобы он появлялся при наведении:
Вообще не понятно какая у вас разметка и какие правила вы назначаете, но мой хрустальный шар подсказывает: Убратьwidth: 100% Добавить flex-grow: 1;
min-width: 0;