Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

desafio HOVER

HTML:

Miriam Fuentes

CSS: /* Estilo normal para el nombre / .mi-nombre { font-size: 40px; color: #333; / Color al inicio / transition: all 0.3s ease; / Transición*/ }

/* Estilo con hover / .mi-nombre:hover { color: #22d4fd; / Color de texto al pasar el cursor / font-size: 48px; / Hace que el texto crezca un poco / transform: scale(1.1); / Añade un ligero zoom */ }

1 respuesta

¡Hola Estudiante, espero que estés bien!

Veo que estás trabajando en un efecto hover para tu texto en HTML y CSS. Lo que has hecho hasta ahora se ve muy bien. Tienes una clase .mi-nombre que aplica estilos al elemento <h1>, y has añadido un efecto hover que cambia el color, aumenta el tamaño de la fuente y aplica un ligero zoom.

Si estás buscando mejorar o ajustar este efecto, aquí tienes algunas sugerencias:

  1. Transiciones Suaves: Ya tienes una transición definida con transition: all 0.3s ease;. Si deseas que la transición sea aún más suave, podrías aumentar el tiempo, por ejemplo, a 0.5s o 0.7s.

  2. Efecto de Sombra: Puedes añadir una sombra al texto cuando el cursor pase sobre él para darle más profundidad. Por ejemplo:

    .mi-nombre:hover {
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    
  3. Cambiar el Cursor: Si quieres que el cursor cambie cuando pase sobre el texto, puedes añadir:

    .mi-nombre:hover {
      cursor: pointer;
    }
    
  4. Otros Efectos: Si te interesa explorar más, podrías experimentar con efectos como rotate o skew en la propiedad transform.

Espero que estas ideas te sean útiles para mejorar tu efecto hover. ¡Diviértete experimentando con CSS! Espero haber ayudado y buenos estudios!