@DmitryLife

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

Добрый день. Доделываю блоки на тильде, поэтому работаю с исходным кодом.
У ссылки есть 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
  • Вопрос задан
  • 72 просмотра
Решения вопроса 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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@MrDecoy
Верставший фронтендер
background-size: cover не анимируется. В примере что вы скинули у size 100% 100% стоит.
Не знаю какие у вас есть возможности. Можете ли вы влезть в вёрстку, но, вижу 2 пути:

1) Сделать фон на псевдоэлементе и скэйлить элемент (или отдельным дивом с абсолютным позиционированием)
2) при анимации устанавливать не 100% 100% а подобрать что-то более подходящее к тому, что будет выглядеть как cover. Однако, это более менее приемлемо только если все картинки одинакового изначально разрешения.
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Я делал в таких случаях отдельный вложенный элемент для фона. И масштабировал сам элемент, а не фон. Ну и overflow:hidden для родителя, конечно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы