Todos sabemos cómo la personalización ilimitada consigue con Generador de sitios web elementor. Con esa personalización, podemos mejorar la experiencia del usuario y ser creativos en lo que creamos.
El intercambio de logotipos en el efecto Hover es cuando el usuario coloca su cursor en el logotipo colocado en su sitio web, cambia automáticamente sus detalles, es decir, color, forma o contorno. En este tutorial, vamos a entender cómo crear un intercambio de logotipos en efecto hover con Elementor.
Cómo crear intercambio de logotipos en el efecto Hover usando Elementor
Ya sabes cuál es el efecto y tienes ideas en tu mente sobre lo que quieres crear, sigamos adelante y veamos cómo.
Para empezar, agregue una sección interna para los widgets.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora
A continuación, debe agregar una columna en la sección creada inicialmente. Para este tutorial, vamos a ir con la estructura de dos columnas.
A continuación, arrastre y suelte el widget de imagen en la columna que creó.
Para que el efecto funcione, se necesitarán dos imágenes. Uno que se mostrará normalmente, mientras que el otro se mostrará cuando el usuario coloca su cursor.
Puede utilizar dos variaciones del mismo logotipo o utilizar dos imágenes completamente diferentes, las posibilidades son ilimitadas.
Después de la selección de imagen, en el campo CSS personalizado pegue el siguiente código CSS para que el intercambio de logotipos en el efecto de desplazamiento funcione.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}¡Y listo! Publica tu página para obtener una vista previa y ver cómo se ve el efecto en tu sitio web. Vuelve a hacer cualquier cambio si quieres.
Así es como puede crear el efecto Intercambio de logotipos al pasar el cursor con Elementor. Asegúrese de unirse a nosotros en nuestros Facebook y Twitter para mantenerse actualizado sobre nuestras publicaciones.
