¡Bienvenidos a nuestro blog de diseño web! Hoy nos adentraremos en una funcionalidad fascinante y visualmente atractiva: cómo hacer que tus imágenes giren al pasar el ratón usando solo CSS y sin PLUGINS.
El diseño web moderno no se trata solo de funcionalidad, sino también de ofrecer experiencias interactivas que cautiven a tus usuarios. Un pequeño detalle como el giro de una imagen puede transformar una página estática en un espacio dinámico y atractivo. En esta entrada, te mostraremos paso a paso cómo implementar esta funcionalidad utilizando CSS puro, sin la necesidad de JavaScript ni otras herramientas externas.
Primer paso
Para comenzar, debemos indicarle a chat gpt que queremos realizar la funcionalidad de Girar las imágenes al pasar el ratón encima, con CSS, WORDPRESS y DIVI.
Podemos utilizar de ejemplo el siguiente prompt:
“Trabajo con wordpress y divi, quiero lograr la siguiente funcionalidad, al pasar el ratón por el elemento imágen estas realicen un giro”
Con el prompt correcto CHATGPT nos dará los datos necesarios para realizar nuestra funcionalidad, en mi caso me dio el siguiente fragmento de código en tu caso podría ser diferente pero las bases son las mismas
—
/* CSS para rotación suave al pasar el ratón sobre una imagen */
.rotate-on-hover {
transition: transform 0.6s ease;
}
.rotate-on-hover:hover {
transform: rotate(360deg);
}
—
Segundo paso
En la configuracion de la página donde estamos trabajando, en la parte central inferior desplegamos los 3 puntos abrimos Configuración, avanzado y lo pegamos en CSS personalizado y nos copiamos el nombre de clase que tiene este fragmento de código CSS
¿Por que son importantes los nombres de clase?
Los nombres de clase determinan qué elementos en tu sitio serán afectados por tu CSS. En un entorno complejo como WordPress con el tema Divi, donde múltiples estilos y scripts pueden estar presentes, utilizar nombres de clase específicos asegura que tus estilos se apliquen exactamente donde lo deseas sin afectar otros elementos inadvertidamente.
En nuestro ejemplo el nombre de clase es: rotate-on-hover
Tercer paso
Con nuestro nombre de clase copiado, la siguiente tarea es dirigirnos a cada módulo imágen en el que querramos lograr nuestra funcionalidad y en los apartados, Configuración-Avanzado-Clase css pegamos nuestro nombre de clase: rotate-on-hover, para de esta manera determinar que solo estos elementos realicen nuestra funcionalidad nescesaria
Último paso
Una vez tengamos nuestra funcionalidad realizada podemos configurar por ejemplo la velocidad en la que giran la imágenes, subiendo o bajando la velocidad de transición, por ejemplo:
Mayor velocidad: .rotate-on-hover {
transition: transform 0.6s ease;
Menor velocidad: .rotate-on-hover {
transition: transform 2.6s ease;
¡Gracias por acompañarnos en esta exploración sobre cómo hacer que tus imágenes giren al pasar el ratón utilizando CSS en WordPress con Divi! Esperamos que este tutorial te haya sido útil y te inspire a seguir mejorando la interactividad de tu sitio web.
No olvides que en nuestro blog de diseño web siempre encontrarás nuevas ideas, tutoriales y consejos para llevar tus habilidades al siguiente nivel. Si te ha gustado este artículo, te invitamos a seguir visitándonos y a suscribirte a nuestro boletín para no perderte ninguna actualización.
¡Hasta la próxima, y sigue creando experiencias web impresionantes!
0 Comments