Как сделать увеличение background при наведение, если size — cover?

Question

[DmitryLife]

Добрый день. Доделываю блоки на тильде, поэтому работаю с исходным кодом.
У ссылки есть background-size: cover;

Мне надо сделать так, чтобы при наведение фон плавно увеличивался. Я пока смог сделать только такое решение:

<style>
    #rec237308335 .t396__elem > a {
       transition: .5s ease;
    }
</style>

<script>
    $('#rec237308335 .t396__elem > a').css('background-size','100% 100%')
    $('#rec237308335 .t396__elem > a').hover(function(){
        $(this).css('background-size','100% 100%')
    })
    $('#rec237308335 .t396__elem > a').mouseover(function(){
        $(this).css('background-size','140% 140%')
    })
</script>

Т.е. сначало изменяю size на 100% 100%. При этом картинка сама начинает кривиться, при изменение размеров блока.
Из позиции cover сделать тоже самое?

Ссылка:
https://specmach.tilda.ws/

Блок № 3

Answer 1

[DmitryLife]

Сделал такое решение:

Background ресайзил относительно отношения сторон.

<style>
    #rec237308335 .t396__elem > a {
       transition: .5s ease;
    }
</style>

<script>
    if($('#rec237308335 .t396__elem > a').width() > $('#rec237308335 .t396__elem > a').height()) {
        $('#rec237308335 .t396__elem > a').css('background-size','100% auto')
    } else {
        $('#rec237308335 .t396__elem > a').css('background-size','auto 100%')
    }
    
    $('#rec237308335 .t396__elem > a').hover(function(){
        if($(this).width() > $(this).height()) {
            $(this).css('background-size','100% auto')
        } else {
            $(this).css('background-size','auto 100%')
        }
    })
    $('#rec237308335 .t396__elem > a').mouseover(function(){
        if($(this).width() > $(this).height()) {
            $(this).css('background-size','120% auto')
        } else {
            $(this).css('background-size','auto 120%')
        }
    })
</script>

Answer 2

[Сергей delphinpro]

Я делал в таких случаях отдельный вложенный элемент для фона. И масштабировал сам элемент, а не фон. Ну и overflow:hidden для родителя, конечно.

Comments

[DmitryLife]

К сожалению тут не так просто вставлять новые элементы.