Categoría · Tarjetas de Contenido Nivel de Dificultad · Intermedio Publicado el · 16 de mayo de 2024

Efecto de Tarjeta Interactiva al Pasar el Cursor

Una tarjeta interactiva moderna con rotación 3D suave y efectos al pasar el cursor, perfecta para exhibición de productos o perfiles de miembros del equipo.

#cards #hover #animation #interactivo #3d

Diseño Responsivo

Soporte para Modo Oscuro

No

líneas

267

Compatibilidad del Navegador

No

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

400px

Efecto de Tarjeta Interactiva al Pasar el Cursor

Este fragmento crea tarjetas de producto interactivas con un efecto de rotación 3D suave y brillo dinámico al pasar el cursor. Es perfecto para sitios de comercio electrónico, perfiles de miembros del equipo o cualquier contenido que se beneficie de una presentación atractiva.

Características

  • Rotación 3D suave que sigue el movimiento del cursor
  • Efecto de brillo dinámico que responde a la posición del cursor
  • Zoom sutil de la imagen al pasar el cursor
  • Diseño responsive que funciona en todos los tamaños de pantalla
  • Soporte táctil para dispositivos móviles
  • Diseño limpio y moderno con elementos personalizables

Consejos de Uso

  1. Personalización: Cambia fácilmente colores, tamaños y animaciones modificando las variables CSS
  2. Contenido: Reemplaza las imágenes y texto de marcador de posición con tu propia información de producto
  3. Accesibilidad: Las tarjetas siguen siendo funcionales incluso sin JavaScript, asegurando que todos los usuarios puedan acceder al contenido
  4. Rendimiento: Las animaciones utilizan aceleración por hardware para un rendimiento fluido

Compatibilidad con Navegadores

Este componente funciona en todos los navegadores modernos que soportan transformaciones CSS y JavaScript. Los efectos 3D se mejoran en navegadores con mejor soporte de WebGL.

HTML

35

líneas

CSS

152

líneas

JavaScript

80

líneas


                <div class="hover-card-container">
  <div class="hover-card">
    <div class="card-content">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Imagen del Producto">
      </div>
      <div class="card-info">
        <h3 class="card-title">Auriculares Premium</h3>
        <p class="card-description">Experimenta un sonido cristalino con nuestros auriculares premium con cancelación de ruido.</p>
        <div class="card-meta">
          <span class="card-price">\$299</span>
          <button class="card-button">Ver Detalles</button>
        </div>
      </div>
      <div class="card-shine"></div>
    </div>
  </div>
  
  <div class="hover-card">
    <div class="card-content">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Imagen del Producto">
      </div>
      <div class="card-info">
        <h3 class="card-title">Reloj Inteligente</h3>
        <p class="card-description">Haz seguimiento de tus objetivos de fitness y mantente conectado con nuestro último smartwatch.</p>
        <div class="card-meta">
          <span class="card-price">\$199</span>
          <button class="card-button">Ver Detalles</button>
        </div>
      </div>
      <div class="card-shine"></div>
    </div>
  </div>
</div>

              
35líneas
1440caracteres
HTMLIdioma

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas →