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

Adis Pastrana

CSS
.mi-nombre {
color: #444; /* gris oscuro de base /
transition: all 0.3s ease; /
animación suave */
}

.mi-nombre:hover {
color: #ff4fa3; /* rosadito fuerte /
font-size: 2.2em; /
crece un poquito /
text-shadow: 2px 2px 8px rgba(255, 79, 163, 0.5); /
brillo rosado /
cursor: pointer; /
mano al pasar */
}

1 respuesta

¡Hola Estudiante, espero que estés bien!

Espero que estés disfrutando del proceso de aprendizaje. Veo que estás trabajando en un desafío de personalización con hover en HTML y CSS. Tu código parece estar bien encaminado. Has aplicado un efecto hover a la etiqueta <h1> con clase mi-nombre, lo cual es una excelente manera de comenzar a personalizar tu proyecto.

Algunas sugerencias para seguir experimentando con el hover podrían ser:

  1. Cambiar el fondo: Podrías agregar un cambio de color de fondo al pasar el cursor. Por ejemplo:

    .mi-nombre:hover {
      background-color: #f0f0f0; /* un gris claro */
    }
    
  2. Rotación: Añadir un ligero efecto de rotación para darle un toque dinámico:

    .mi-nombre:hover {
      transform: rotate(5deg);
    }
    
  3. Transformaciones: Jugar con otras transformaciones como escalar:

    .mi-nombre:hover {
      transform: scale(1.1); /* aumenta un 10% */
    }
    
  4. Cambiar la fuente: Puedes cambiar la familia de la fuente para darle un estilo diferente al pasar el cursor:

    .mi-nombre:hover {
      font-family: 'Courier New', Courier, monospace;
    }
    

Recuerda que la clave está en experimentar y ver qué efectos te gustan más para tu proyecto. ¡Diviértete probando diferentes combinaciones y estilos!

Espero haber ayudado y buenos estudios!