Создание масштабирования изображения с помощью CSS при наведении курсора в WordPress

Привет, ребята,

Сегодня я предлагаю вам очень простой урок, но я думаю, что он может быть очень полезным для вас.

Давайте посмотрим, как мы можем создать изображение с масштабированием при наведении курсора мыши, как показано ниже:

Видеоурок

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

В случае моего сайта это будет:

<img class="zoom" src="https://comohacerunapagina.es/wp-content/uploads/2018/05/imagen-aleatoria.jpeg" alt="imagen aleatoria con zoom">

Теперь, когда у нас есть созданный класс, мы собираемся добавить CSS, для этого мы собираемся Настроить -> Дополнительный CSS:

Вот код, который вам нужен:

.zoom {
    transition: transform .2s; 
}

.zoom:hover {
    transform: scale(1.5); 
}

Приведенный выше css состоит из двух частей:

Увеличить изображение

CSS, отвечающий за эти части, выглядит следующим образом:

.zoom:hover {
    transform: scale(1.5); 
}

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

Переход из одного состояния в другое постепенно

Чтобы увидеть плавную анимацию между обеими позициями, добавим в css следующую часть:

.zoom {
    transition: transform .2s; 
}

Здесь мы указываем ему переходить из начального положения в конечное за 0.2 секунды.

Изменяя время, мы изменяем скорость трансформации.

Как вы можете видеть очень просто и может быть очень полезным