Дамир Шаниязов

Кажется дело в type="sumbit". Sumbit передает значение на сервер.
event.preventDefault();

Действительно не понял, тут надо понимать кто есть родитель и какие у него размеры. Может быть такое, что и рисунок должен стоять в другом месте :)) тут только опытным путем

Хочу обратить внимание в вашем примере img имеет ширину 100% и высоту auto, в таком случае img задает размеры родительскому элементу.

А можно пойти от обратного, когда у родителя есть определенные размеры. В таком случае надо пользоваться background-size и возможно background-position. Скорее всего придется пойти на жертвы)

Можно попробовать с keyframes

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   animation: fontbulger 2s infinite;

Например, в этом примере за 0.6 cекунды шрифт меняется с 10 до 15, а дальше за 1.4 секунды меняет с 15 до 12

Вам же надо сделать так скорее всего с background (image). но тут вопрос в том как быстро они загружаются. если долго, то без js не обойтись скорее всего

Как-то видел подобную штуку, там использовали ::after/before