¿Estás buscando la manera de colocar texto sobre una imagen en Elementor al pasar el cursor?
Si es así, has llegado al lugar correcto. Te mostraré cómo utilizar la plataforma de diseño visual Elementor para añadir texto sobre una imagen al pasar el cursor de manera sencilla y rápida. Con la herramienta de arrastrar y soltar de Elementor, podrás colocar el texto en cualquier imagen con css. El código te dejo debajo 👇
Css personalizado de como poner un texto sobre imagen en elementor
selector {
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover {
opacity: 1;
}
Si esta usando Elementor gratuito, lo único que tienes que hacer es darle una clase a la sección.
El nombre de la clase que uso en el video se llama “card-section“, entonces el código css quedaría así:
<style>.card-section{
opacity: 0;
transition: 0.5s ease-in-out;
}
.card-section:hover {
opacity: 1;
}</style>
propiedades:
opacity: muestra el nivel de transparencia donde 1 no es nada transparente y 0 es completamente transparente.
transition: esto sirve para crear un efecto de transición donde tienes que especifícar dos cosas , la propiedad css que es transition y la duración del efecto, en este caso el efecto que usamos es ease-in-out lo que hace es una transición con un comienzo y un final lento.
te dejaré un video tutorial debajo donde te explicaré paso a paso como poner un texto encima de una imagen con elementor al pasar el cursor 👇👇
