как увеличить высоту изображения снизу вверх

Question

вот мой код для заполнения бака

const filler=(props)=>(
    <div className={Classes.filler} style={{height: `${props.percentage}%`}}></div>
);

вот код css для моего наполнителя

.filler{
    background: url('../../../../assets/image/dark.png');
    background-size: 180%;
    transition: height 1s ease;
    background-position: 0px 0px;
    width: 100%;
    transform-origin: 0% 100%;
    background-repeat: no-repeat;
}

проблема, с которой я имею дело, заключается в том, что вместо изображение воды, увеличивающейся снизу вверх, увеличивается сверху вниз. Я попытался преобразовать происхождение изображения, но это не сработало. Вот несколько изображений для справки.

Здесь я хочу, чтобы изображение поднималось от нижней границы, но оно увеличивается сверху вниз

Answer 1

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

.filler{
    background: url('../../../../assets/image/dark.png');
    background-size: 180%;
    width: 100%;
    background-repeat: no-repeat;
    height: 0px;
    overflow:hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    position:absolute;
    left:0;
    bottom:0;
}
.animationstart:hover{
   height: 200px; /* max height */
}