Saltearse al contenido
The Vault

Split Hover Card

Un split hover effect… ¯\(ツ)/¯

Esto ya es un poco mas complicado…

Este es un efecto en el que un elemento (como una tarjeta o imagen) se divide en partes, moviéndose de forma independiente al pasar el cursor sobre ella, revelando contenido oculto. Esto se logra con propiedades de CSS como clip-path, transform, polygon() y :nth-child().

Split Hover Card Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A odio nulla autem ab, sunt explicabo reiciendis.

;)

Hover me!
SplitEffect.html
<div class="card">
  <span></span>
  <span></span>
  <div class="content">
    <p>;)</p>
  </div>
</div>

Desglose técnico

1. clip-path

La propiedad clip-path crea una región de recorte que establece qué parte de un elemento debe mostrarse. Las partes que están dentro de la región se muestran, mientras que las que están fuera se ocultan. Aquí usamos polígonos para definir qué se muestra:

  • Mitad izquierda: polygon(0 0, 50% 0, 50% 100%, 0% 100%).
  • Mitad derecha: polygon(50% 0, 100% 0, 100% 100%, 50% 100%).

Por ejemplo:

* { clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); }

Recorta un rectángulo desde el 0% al 50% horizontalmente, y del 0% al 100% verticalmente.

Dentro se coloca la coordenada (x, y) de cada punto de la forma, separando cada punto con una coma.

Aunque mida un 100% de width nuestro elemento, este se cortara y por ejemplo, con la parte derecha polygon(50% 0, 100% 0, 100% 100%, 50% 100%), se vera algo asi:

Ejemplo de clip-path que corta al 50% del width

Los círculos que se muestran en la imagen son los puntos de la forma que estamos cortando.

¿Por qué hay líneas visibles en mi card?

Solución

Una forma sencilla de eliminar estas líneas es expandir ligeramente los bordes del área recortada. Esto se puede lograr ajustando los valores en las coordenadas del polygon() mediante un multiplicador.

Por ejemplo:

/* Ajuste para eliminar líneas visibles */
span {
  --x1: var(--o);
  --x2: calc((var(--o) + var(--w)) * 1.01); /* Expandimos un 1% adicional */
  --x3: var(--x2);
  --x4: var(--x1);
}

En este caso, multiplicamos por 1.01 los valores calculados para expandir el área del clip. Esto asegura que las secciones recortadas se superpongan ligeramente, eliminando las líneas visibles.

2. nth-child

El selector :nth-child() selecciona elementos secundarios según su posición entre todos los elementos hermanos dentro de un elemento primario.

Es complicado, pero en este caso, simplemente es para elegir un elemento <span> específico.

Usamos nth-child para aplicar estilos diferentes a cada span dentro del contenedor .card. Esto nos permite definir las formas específicas y los movimientos de cada parte.

span:nth-child(1) { /* Efectos aplicados al <span> numero '1' */ }
span:nth-child(2) { /* Efectos aplicados al <span> numero '2' */ }
...

3. Transiciones y movimiento

La propiedad transform se utiliza para mover las mitades hacia afuera al hacer hover:

  • translateY controla el desplazamiento vertical.
  • translateX controla el desplazamiento horizontal.

Al hacer hover, los valores de las variables CSS (--y y --x) cambian para animar las mitades hacia diferentes direcciones y con diferentes efectos.

Ejemplos con variaciones avanzadas

Si no tienes imaginación, aquí tienes algunos ejemplos de diferentes variantes.

SplitEffect.html
<div class="card">
 <span></span>
 <span></span>
  <div class="content">
    <p>;)</p>
  </div>
</div>

Fin.