Clase 10 · Pseudoclase hover + efectos

Qué es una pseudoclase

Las pseudoclases se utilizan para hacer referencia a elementos HTML que tengan un cierto comportamiento o estado concreto.

.nombre-clase:pseudoclase

Pseudoclases de interacción (links)

.btn {
    color: red;
}

.btn:visited{
    color: green;
}

.btn:hover{
    color: rgb(235, 10, 138);
}

.btn:focus{
    color: rgb(15, 245, 192);
}

.btn:active{
    color: rgb(252, 96, 13);
}

Cómo funciona :hover

Las propiedades de nuestro enlace o elemento las definimos en nuestra clase .btn. En la pseudoclase solo pondremos lo que queremos cambiar o añadir respecto a la clase principal.

.btn{
    color: red;
    background-color: yellow;
    padding:8px 16px;
}

.btn:hover{
    background-color: black;
    border-radius: 12px;
}

¿Qué puedo modificar mediante hover?

Ejemplo botón

Hover invirtiendo colores: cambiamos el color de fondo, el color del texto y el color del borde.

.btn{
    background-color: aquamarine;
    color: rgb(10, 148, 148);
    padding:8px 24px;
    border: 2px solid rgb(10, 148, 148);
    border-radius:25px;
    font-size:24px;
    text-decoration: none;
}

.btn:hover{
    background-color: rgb(10, 148, 148) ;
    color: aquamarine ;
    border: aquamarine ;
}

Hover en otros elementos

Podemos cambiar el estado de cualquier elemento cuando nos situamos con el ratón sobre él (div, img, texto…). Ejemplo: cambiar la anchura de un div con texto.

.content{
    background-color: yellow;
    padding:16px;
    width:250px;
}

.content:hover{
    width:400px;
}

Opacity

Nos permite cambiar la transparencia de un elemento: de 0 (transparente) a 1 (opaco).

.content{
    opacity:0.1;
    background-color: yellow;
    padding:16px;
    width:250px;
}

.content:hover{
    opacity:1;
    width:400px;
}

Transform (movimiento, rotación y escala)

transform nos permite cambiar diferentes aspectos. Estos son los más utilizados:

Transform: translate

Podemos mover cada eje (x, y, z) de forma independiente: translateX(80px), translateY(80px) y translateZ(80px). O mover todos los ejes a la vez en una única línea, separados por comas (el orden es X-Y-Z): translate(80px, 60px).

.content:hover{
    transform:translateX(80px);
}

.content:hover{
    transform:translateY(60px);
}

.content:hover{
    transform:translate3d(80px,40px);
}

Transform: rotate

Indicaremos la rotación en grados: deg. rotate gira sobre el centro, rotateX sobre el eje horizontal y rotateY sobre el eje vertical.

.content:hover{
    transform:rotate(80deg);
}

.content:hover{
    transform:rotateX(80deg);
}

.content:hover{
    transform:rotateY(80deg);
}

Transform: scale

Podemos escalar cada eje (x, y) de forma independiente con scaleX(1.2) y scaleY(1.2), o ambos a la vez en una única línea, separados por comas (orden X-Y): scale(1.2) o scale(1.2, 0.8).

.content:hover{
    transform:scale(1.2, 0.8);
}

Transition

Nos permite hacer los cambios entre el estado normal y el estado hover de forma gradual. Indicamos el tiempo que dura la transición en segundos o milisegundos: transition: 0.6s; o transition: 600ms;.

.content{
    opacity:0.1;
    background-color: yellow;
    padding:16px;
    width:250px;
}

.content:hover{
    transition:0.5s;
    opacity:1;
    width:400px;
}

Comportamiento de transition

Al hacer hover pasamos del estado normal (A) al estado hover (B) de forma gradual gracias al transition de la pseudoclase :hover. Al dejar de hacer hover, de B a A, no es gradual porque no hemos puesto transition en la clase original (A).

.content{
    background-color: red;
    width:80px;
    height:80px;
    border-radius: 80px;
}   /* No hay transición */

.content:hover{
    background-color: yellow;
    transform: translateY(-200px);
    transition:0.6s;
}

Si queremos que tanto al hacer hover como al dejar de hacer hover el cambio sea gradual, tenemos que poner transition tanto en la clase (A) como en la pseudoclase (B).

.content{
    background-color: red;
    width:80px;
    height:80px;
    border-radius: 80px;
    transition:0.6s;
}

.content:hover{
    background-color: yellow;
    transform: translateY(-200px);
    transition:0.6s;
}

Transition (aceleración)

La transición tiene un movimiento constante; podemos variar un poco la aceleración con los siguientes valores: ease, ease-in, ease-out y ease-in-out. Estos valores se indican después del tiempo que dura la transición.

.content{
    background-color: red;
    width:80px;
    height:80px;
    border-radius: 80px;
    transition:0.6s ease;
    transition-delay:0.8s;

}

Transition-delay

Es el retardo con el que empieza la transición. Indicamos el tiempo en segundos o milisegundos: transition-delay: 0.6s; o transition-delay: 600ms;.

.content{
    background-color: red;
    width:80px;
    height:80px;
    border-radius: 80px;
    transition:0.6s;
    transition-delay:0.8s;

}


.content:hover{
    background-color: yellow;
    transform: translateY(-200px);
    transition:0.6s;
}

Filtros

CSS nos permite aplicar diferentes filtros a imágenes y elementos con la propiedad filter:

filter: none;
filter: blur(5px);
filter: brightness(200%);
filter: contrast(200%);
filter: drop-shadow(8px 8px 10px gray);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(30%);
filter: saturate(8);
filter: sepia(100%);
filter: contrast(200%) brightness(150%);

Resultado