¿Quieres cambiar una imagen al pasar el cursor sobre un texto con el creador de página Elementor ? En este nuevo tutorial, le mostraremos cómo hacerlo.
Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:
Entonces volvamos a por qué estamos aquí.
Descubra también nuestra guía sobre: Cómo crear una tarjeta de efecto de cartera con Elementor
Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.
Vamos a crear una sección con 2 columnas, luego en el panel lateral, vamos a definir el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
En la pestaña Estilo vamos a seleccionarlo tipo de fondo en cliquant sur Clásico, luego modifique el los colores en# F9F9F9
En la pestaña Avanzado, modificar todos los Márgenes internos en 25
Ahora vamos a cambiar el ancho de la columna a 40% para la columna de la izquierda y 60% para la columna de la derecha.
En la columna de la izquierda, dejemos caer un Widget de edición de texto, luego pegue un Texto en él y modifique el Tamaño del título texto en Titulo 3.
En la pestaña Avanzado, ingresa como Márgenes internos 10-25-10-30 respectivamente para el márgenes internos superior, derecho, inferior e izquierdo
En la sección Fondo pestaña Avanzado, haga clic en INFORMACIÓN GENERAL, luego seleccione el tipo de fondo en Clásico, entremos color #DFF5FF et Duración de la transición en 0.5.
Si pasamos el cursor sobre el texto, tendremos la oportunidad de descubrir un magnífico color de fondo al pasar el mouse por encima.
Ahora vamos a la sección fronterasy haga clic en INFORMACIÓN GENERAL, luego seleccione Continúar para tipo de borde et desactivemos el enlace entre borde entrar 4 para el borde izquierdo. Seleccionemos el color #002FA7 y agregue una duración de transición a 0.5
Si pasamos el cursor sobre nuestro cuadro de texto una vez más, veremos una animación más prominente con un borde a la izquierda.
En la sección frontera, volvamos a la pestaña NORMAL, seleccionemos el tipo de borde en Continúar, apaguemos el enlace entre bordes, agarre 4 para el borde izquierdo y hacerlo muy transparente.
Si pasamos el cursor sobre el texto una vez más, veremos una transición muy suave.
Lea también: Cómo mostrar texto sobre una imagen con Elementor
Dupliquemos este texto dos veces y cambiemos los textos de cada uno. contenido como esto.
En la columna de la derecha, arrastre un Widget de imagene inserte una imagen de nuestra biblioteca.
Vamos a crear algo de espacio alrededor de esta imagen yendo a Lengüeta avanzada de la columna e ingrese 10 – 10 – 10 – 50 para todos los márgenes internos de Superior, Derecha, Inferior e Izquierda.
Seleccionemos la imagen y en la pestaña Avanzado de este último, vamos a la sección Efectos de movimiento entonces Animación de entrada, Seleccione Fundido En
Vamos a la sección Avanzado desde la pestaña Avanzado y agregue algunos nombres de clase en el campo Clases CSS. Así que vamos a conseguir todo-img img-1
Dupliquemos nuestra imagen 2 veces.
Seleccionemos la segunda imagen y cambiemos img-1 a img-2, luego cambiemos la imagen a una nueva imagen.
Ver también: Cómo crear una galería de imágenes con Elementor
Para la tercera imagen, simplemente cambiemos img-1 a img-3, luego cambiemos la imagen a una nueva imagen.
Seleccionemos nuestra sección y vayamos a su pestaña Avanzado. En la sección CSS personalizado, copie y pegue el siguiente fragmento de código:
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}(Si no tiene esta sección, entonces no tiene la versión Pro, si desea continuar, debe actualizar su versión).
Seleccionemos nuestro primer editor de texto y vayamos a la pestaña Avanzado y el Sección de atributos. En el campo Atributos, copie y pegue el siguiente fragmento de código:
data-showme|img-1Haga esto para otros editores de texto mientras cambia img-1 a img-2 o a img-3
Ahora agreguemos un widget HTML a nuestra página. Copie y pegue el siguiente script:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
Ahora guarde o actualice su página y luego obtenga una vista previa.
Ahí tienes, acabas de hacer esta tarea fácilmente.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo cambiar una imagen al pasar el cursor sobre un texto. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
