https://www.youtube.com/embed/OtPi1sOIUqU

Paso 1: Haz clic en la ventana de "CSS personalizado" y pega el siguiente código:

.imagestyle1 {
    transition: 0.6s;
}

.imagestyle1:hover {
/* currently 1.2 means the image is at 120% of its original size */
    transform: scale(1.2);
    z-index: 10;
    transition: 0.6s;
}

Este código hace que una imagen, elemento o fila se agrande cuando pasas el cursor sobre ella. Incluye una transición suave de 0,6 segundos tanto al entrar como al salir del efecto hover.

Paso 2: Haz clic en la imagen o elemento al que deseas aplicar el efecto y, en el campo "Clase personalizada" bajo la pestaña Avanzado, agrega la misma clase personalizada imagestyle1.

Paso 3: Si previsualizas tu sitio y pasas el cursor sobre la imagen, el efecto funcionará.

Ajusta cuánto quieres que se amplíe la imagen y qué tan rápido modificando las propiedades de “transition” y “transform”.

Actualmente, la imagen se agranda un 20 % (es decir, escala a 1.2), pero puedes ajustar este valor. Si deseas que la imagen se agrande un 40 %, puedes ajustar la propiedad transform a “scale(1.4)” y así sucesivamente.