En CSS podemos crear efectos visuales interactivos para que los elementos reaccionen cuando el usuario pasa el mouse sobre ellos. Esto hace que los sitios web se vean más modernos y dinámicos.
Para lograrlo utilizamos:
:hover → Detecta cuando el mouse pasa sobre un elemento.transform → Permite transformar elementos.
La pseudoclase :hover
se activa cuando el usuario coloca el puntero del mouse sobre
un elemento HTML.
Se utiliza mucho en:
button{
background-color: blue;
color: white;
}
button:hover{
background-color: red;
}En este ejemplo, el botón cambia de color cuando el mouse pasa sobre él.
La propiedad transform
permite modificar visualmente un elemento.
Podemos:
La función scale()
cambia el tamaño de un elemento.
scale(1) → tamaño normal.scale(1.2) → aumenta un 20%.scale(0.5) → reduce el tamaño.img:hover{
transform: scale(1.2);
}Cuando el usuario pasa el mouse sobre la imagen, esta aumenta su tamaño.
La función rotate()
rota un elemento.
La rotación se mide en grados utilizando:
deg.
div:hover{
transform: rotate(10deg);
}El elemento gira 10 grados cuando el mouse pasa sobre él.
Lo más común es usar ambas propiedades juntas para crear efectos interactivos.
button{
transition: 0.3s;
}
button:hover{
transform: scale(1.1) rotate(2deg);
}En este ejemplo el botón:
transition.
La propiedad transition
hace que los cambios visuales no ocurran de golpe.
button{
transition: 0.5s;
}Esto genera una animación suave de medio segundo.
:hover detecta el paso del mouse.transform modifica visualmente elementos.scale() cambia el tamaño.rotate() rota elementos.transition agrega suavidad a las animaciones.