MariPolina, такое https://codepen.io/rm/pen/AXpmja вам надо?
Это первый попавшийся пример в поиске по codepen. Альтернатив полно.
Только там hr, но его нужно заменить на псевдо.
MariPolina,
1. В вашем коде нет ничего про получение координат кликнутой кнопки. Что-нибудь типа getBoundingClientRect().left, если родителем оставляем body.
2. Почитайте про позиционирование.
Если у элемента одновременно заданы left, right и width и эти значения противоречат друг другу (т.е. не дают сумму), то right будет проигнорирован. Т.е. в любом случае будет проигнорирован, но по результату вам покажется, что норм.
3. Почитайте про transition.
Вы можете анимировать и left и right. Т.е. менять значение и там и там. Но это только лишняя писанина, потому что см выше.
Но не можете анимировать с left 316 на right 425.
Кстати, а зачем вообще этот div minii? Что-то у меня есть подозрение, что решать нужно предыдущую задачу.
p.s. какая-то дичь с флексами. Сначала вы задаете флекс для tema. Т.е. вроде умеете с ними работать. А li внутри списка делаете инлайновыми. Причем, даже не инлайн-блочными. Хотя там флексам самое место.
Удобнее это делать, когда у кнопок и блока один родитель, не body. Но если блок с кнопками всегда первый, то без разницы.
Не очень понятно, что именно у вас не получилось. И много вопросов
1. Зачем тут animate?
2. При чем тут swiper?
3. Почему вы делаете кнопки вместо ссылок? Что за дичь?
4. Где песочница с демонстрацией проблемы на jsfiddle.net или codepen.io? А то как мы узнаем что у вас в js и как оно работает?
План простой: задаете начальные top и left (ну или другую пару, но всегда одинаковую)
Узнаете координаты кнопки, куда должен попасть блок.
Меняете эти top и left.
В transition тоже четко прописываете свойства top и left, а не all, как сейчас.
Ну и пусть катится.
С другой стороны, менять по дороге озвученную стоимость ну такое себе.
Да, у вас будет убыток, но он же плата за обучение и за неумение оценивать собственную работу.
1. Наверное, имеет смысл просить посмотреть на пациента до того, как называть сумму.
2. Таймтрекер - наше всё. И выводы из предыдущих работ тоже. Если вы ещё не записываете сколько времени у вас уходит а разные проекты, очень рекомендую начать.
boxFight, еще раз медленно: вынимаем селект из таблицы (можно на js). Помещаем в разметку снаружи.
На том же JS выясняем где нужно разместить этот селект. Задаем координаты.
Для удобства можно сделать обертку равную размеру таблицы. В ней будет таблица и перемещенный select. Так вам будет проще работать с координатами.
Ответ очевидный. Вынуть его из overflow. Например, вешать сверху абсолютом. Или перевесить overflow так, чтобы он не обрезал селект. Если overflow в принципе нужен.
В песочнице нет стилей.
Допишешь - будет видно, что всё работает.
Если в своем коде руками добавляешь классы (как бы работая вместо скрипта), всё правильно функционирует?
Если да - то проверяй подключение скрипта. Оно должно быть перед закрывающим </body>
Если нет - то проверяй, что в стилях к этим классам.
Только инпут давно не надо скрывать. apperance: none прекрасно работает (в современных браузерах уже без префиксов) и позволяет стилизовать прямо радио. Даже псевдо работают.
Вот от неё скрин с каким-то малюсеньким вьюпортом. Оригинальный размер картинки 1020. Минимальная ширина не сброшена.
Видим, что картинка тоже стала маленькой и явно меньше 1020, т.е. не уперлась в свой минимальный размер.
spoiler
Но основной постулат всё равно один: адаптивные картинки лучше оборачивать во что-нибудь (div, figure, ссылка - по обстоятельствам)
Если нет доступа к БД, то на JS.
Это если отмести здоровый вариант: сверстать это нормально через
<dl>ну или<table>