es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Hover:scale-125 no funciona en imágenes con Tailwind CSS.

15 Jul, 2023 Programación

Tengo una fila de imágenes que quiero agrandar cuando los paso por encima. La documentación parece bastante simple, pero no está funcionando por alguna razón. Esto es lo que estoy haciendo en cada imagen:

<img class="inline h-64 hover:scale-125" [src]="'assets/images/teaching/custom-craftsmanship.jpg'">

¿Qué estoy haciendo mal?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el código proporcionado, parece que estás utilizando la clase de utilidad correcta de TailwindCSS, hover:scale-125, para agrandar la imagen al pasar el mouse por encima. Sin embargo, podría haber algunas razones por las cuales no está funcionando como se espera.

    1. Asegúrate de haber importado la hoja de estilos de TailwindCSS en tu proyecto.
    2. Verifica si hay estilos conflictivos en tu archivo CSS que podrían estar anulando la clase hover:scale-125.
    3. Intenta agregar una propiedad de transition a tu clase de imagen, como transition duration-500 ease-in-out, para crear un efecto de animación suave.

    Código de ejemplo:

    <img class="inline h-64 hover:scale-125 transition duration-500 ease-in-out" [src]="'assets/images/teaching/custom-craftsmanship.jpg'">

    Si ninguna de las soluciones anteriores funciona, intenta revisar la consola del navegador en busca de mensajes de error que puedan proporcionar más información.

Comments are closed.