Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Consejo Rápido: Cómo crear un simple efecto de apilamiento al colocar el puntero (hover) con CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Un patrón de diseño que se ve comúnmente es el de un contenedor de tarjetas con otras tarjetas debajo, lo que resulta en un efecto de apilamiento de múltiples capas. Luego, durante el estado de «hover» (al colocar el puntero), las tarjetas desaparecen suavemente o cambian a su posición predeterminada. En este breve tutorial, aprenderemos una sencilla técnica de CSS para crear tal efecto.

Como es habitual, veamos primero nuestra demostración (desplázate para ver todos los ejemplos):

1. Inicia con el marcado HTML

Empezaremos con el elemento .card-wrapper que incluirá todas las tarjetas.

Cada tarjeta, que está representada por la clase card, contendrá el elemento .card-inner. Dentro de ese elemento, colocaremos el contenido de la tarjeta objetivo:

Dependiendo del efecto de hover que queramos lograr, cada clase recibirá una de las siguientes clases:

  • card-top-left
  • card-top-right
  • card-bottom-left
  • card-bottom-right
  • card-diagonal-from-right
  • card-diagonal-from-left
  • card-rotate
  • card-perspective
  • card-origin


2. Define los estilos

Con el marcado preparado, configuraremos algunas variables CSS y reiniciaremos los estilos:

Para crear el efecto de apilamiento, vamos a aprovechar los pseudoelementos. Para cada tarjeta definiremos los pseudoelementos :: before y :: after y los posicionaremos de manera absoluta en relación con la tarjeta padre.

Luego, los alejaremos de su posición original usando la propiedad transform. Para los primeros seis ejemplos de la demostración, la cantidad de esta reposición estará determinada por las variables offset-before y offset-after.

Otra cosa que hay que tener en cuenta es que le damos z-index: 1 a todos los elementos .card-inner para que siempre estén colocados encima de sus seudoelementos.

Aquí está la disposición de la tarjeta cuando el valor de la variable offset-before es de 8 píxeles y el valor de la variable offset-after es de 16 píxeles:

The stacking effect with pseudo-elements

Y aquí está la disposición cuando esas variables duplican sus valores:

The stacking effect with pseudo-elements

Los estilos CSS que se requieren para crear el diseño de la tarjeta:

Como se indicó, cada tarjeta incluye una segunda clase que controla sus desplazamientos iniciales junto con el efecto hover. Por ejemplo, aquí están las reglas adicionales que se activan para una carta que contiene la clase card-top-left class:


Conclusión

¡Y hemos terminado, amigos! En este rápido tutorial, empleamos un simple enfoque de CSS para crear efectos de hover en una pila de tarjetas.

Aquí hay un recordatorio de lo que hemos creado:

¿Alguna vez has implementado este tipo de diseño? Si es así, ¿qué técnica usaste? ¡Únete a la conversación en la sección de comentarios!

Como siempre, ¡muchas gracias por leer!

Efectos «hover» de CSS de siguiente nivel

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.