Teoría
Teoría

Efectos al pasar el cursor: galería

Cuando queremos cambiar suavemente la posición, el tamaño o la apariencia de un bloque, podemos elegir entre combinar transition con transform o utilizar JavaScript para modificar dinámicamente sus dimensiones y coordenadas.

A menudo se elige una implementación con JavaScript y la biblioteca jQuery. Sin embargo, animar transformaciones con CSS puede evitar cálculos repetidos de la distribución de la página. Además, en algunos casos el navegador puede aprovechar los recursos del procesador gráfico de la computadora o del teléfono para determinadas transformaciones. Esto puede aliviar la carga del procesador central y ayudar a reducir los retrasos de los efectos.

En este ejercicio crearemos una pequeña galería con transformaciones y transiciones: las imágenes crecerán y se volverán semitransparentes al pasar el cursor sobre ellas.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Efectos al pasar el cursor: galería</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="deck"> <li><img class="ten" src="cards/10.png" alt="Diez"></li> <li><img class="queen" src="cards/queen.png" alt="Reina"></li> <li><img class="king" src="cards/king.png" alt="Rey"></li> <li><img class="ace" src="cards/ace.png" alt="As"></li> <li><img class="ten" src="cards/10.png" alt="Diez"></li> <li><img class="jack" src="cards/jack.png" alt="Jota"></li> <li><img class="queen" src="cards/queen.png" alt="Reina"></li> </ul> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; } .deck { list-style: none; } .deck > li { position: relative; display: inline-block; margin: 0 20px 20px 0; } .deck img { width: 100px; transition: all 0.1s linear; } .deck img:hover { }

ObjetivosRealizado

Asigna opacity con el valor 0.6 a .deck img:hover.
Añade una ampliación con scale y el valor 1.1.

Después de cada cambio, pasa el cursor sobre cualquier carta para comprobar el efecto.