Efecto de Animación en Lettering con CSS

Quiero compartir un efecto visual que anima el espaciado de las letras al interactuar con los enlaces de una página web. Este efecto es sencillo de implementar y añade un toque de dinamismo a tus diseños.

Código HTML

La estructura HTML consta de varias secciones con un contenedor que incluye un título y una imagen. Este diseño minimalista es ideal para mostrar elementos interactivos.

<section id="section-1">
  <div class="container">
    <a href="#">
      <h3>Lorem ipsum dolor sit</h3>
      <figure>
        <img src="https://picsum.photos/id/66/350/350">
      </figure>
    </a>
  </div>
</section>

<section id="section-2">
  <div class="container">
    <a href="#">
      <h3>Duis aute irure dolor</h3>
      <figure>
        <img src="https://picsum.photos/id/62/350/350">
      </figure>
    </a>
  </div>
</section>

<section id="section-3">
  <div class="container">
    <a href="#">
      <h3>Excepteur sint occaecat</h3>
      <figure>
        <img src="https://picsum.photos/id/56/350/350">
      </figure>
    </a>
  </div>
</section>

Código CSS

El efecto de animación se logra principalmente con la propiedad letter-spacing y las transiciones. Además, se aplican estilos básicos para centrar y destacar los elementos.

:root {
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-heading-color: 255, 255, 255;
}

section {
  padding-block: 100px;
  text-align: center;
}

section h3 {
  font-size: 3rem;
  margin-block-end: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  width: fit-content;
  transform: translate(-50%, -50%);
  text-wrap: nowrap;
  margin: 0;
  text-transform: uppercase;
}

section a{
  text-decoration: none;
  transition: letter-spacing .1s linear;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
}

section a:hover {
  letter-spacing: .7em;
}

section a:not(:hover) {
  transition: letter-spacing 2s linear;
}

Cómo Funciona

• Transiciones suaves: Los enlaces utilizan una transición rápida (.1s) para aumentar el espaciado al pasar el ratón y una más lenta (2s) al dejar de interactuar.
• Posicionamiento central: El texto del enlace está perfectamente centrado gracias a position: absolute y transform: translate(-50%, -50%).
• Interacción elegante: El espaciado de letras (“letter-spacing”) cambia dinámicamente, añadiendo un efecto moderno y llamativo.

Resultado Final

El efecto crea una experiencia visual atractiva que capta la atención del usuario al interactuar con los enlaces.

Aplicaciones Prácticas

• Este efecto es perfecto para:
• Menús de navegación.
• Portafolios creativos.
• Galerías de imágenes o proyectos.