Categoría · Tarjetas de Contenido Nivel de Dificultad · Intermedio Publicado el · 22 de agosto de 2025
Tarjeta de Producto Animada

Tarjeta de producto moderna con efectos al pasar el mouse, vista rápida y funcionalidad de agregar al carrito, perfecta para listados de comercio electrónico.
#product #card #ecommerce #animation #hover
Diseño Responsivo
Sí
Soporte para Modo Oscuro
líneas
592
Compatibilidad del Navegador
Chrome · Firefox · Safari · Edge
Vista Previa en Vivo

Interactúa con el componente sin salir de la página.
350px
HTML
líneas
CSS
372
líneas
JavaScript
173
líneas
                <div class="product-card-container">
  <div class="product-card-demo">
    <div class="product-card">
      <div class="product-image">
        <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=400&h=400&fit=crop" alt="Audífonos Inalámbricos">
        <div class="product-badge">Oferta</div>
        <div class="product-actions">
          <button class="action-btn wishlist" title="Agregar a Lista de Deseos">♡</button>
          <button class="action-btn quick-view" title="Vista Rápida">👁️</button>
          <button class="action-btn compare" title="Comparar">⇄</button>
        </div>
      </div>
      
      <div class="product-info">
        <div class="product-category">Electrónica</div>
        <h3 class="product-title">Audífonos Inalámbricos Premium</h3>
        <div class="product-rating">
          <span class="stars">★★★★★</span>
          <span class="rating-count">(128)</span>
        </div>
        <div class="product-price">
          <span class="current-price">\$89.99</span>
          <span class="original-price">\$129.99</span>
        </div>
        <div class="product-description">
          Audífonos inalámbricos de alta calidad con cancelación de ruido y 30 horas de duración de batería.
        </div>
        <div class="product-variants">
          <div class="color-options">
            <span class="color-option active" style="background: #333;" title="Negro"></span>
            <span class="color-option" style="background: #fff; border: 1px solid #ddd;" title="Blanco"></span>
            <span class="color-option" style="background: #667eea;" title="Azul"></span>
          </div>
        </div>
        <div class="product-actions-bottom">
          <button class="btn btn-secondary add-to-cart">
            <span class="btn-text">Agregar al Carrito</span>
            <span class="btn-icon">🛒</span>
          </button>
          <button class="btn btn-primary buy-now">
            <span class="btn-text">Comprar Ahora</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

              

                .product-card-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  padding: 30px;
  border-radius: 20px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.product-card-demo {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}

.product-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  animation: fadeInUp 0.6s ease-out;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 2;
}

.product-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: all 0.3s ease;
  z-index: 2;
}

.product-card:hover .product-actions {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: white;
  color: #333;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
}

.wishlist.active {
  color: #ff6b6b;
  background: #ffebee;
}

.product-info {
  padding: 25px;
}

.product-category {
  color: #667eea;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.product-title {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.stars {
  color: #ffd700;
  font-size: 1rem;
  letter-spacing: 2px;
}

.rating-count {
  color: #666;
  font-size: 0.9rem;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.current-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}

.original-price {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
}

.product-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.product-variants {
  margin-bottom: 20px;
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-option {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.color-option.active,
.color-option:hover {
  transform: scale(1.2);
  border-color: #333;
}

.product-actions-bottom {
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary {
  background: #f1f5f9;
  color: #666;
}

.btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-icon {
  font-size: 1.1rem;
}

/* Modal de vista rápida */
.quick-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.quick-view-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 15px;
  padding: 30px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.quick-view-modal.active .modal-content {
  transform: scale(1);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.product-card.pulse {
  animation: pulse 0.5s ease;
}

/* Responsivo */
@media (max-width: 768px) {
  .product-card-container {
    padding: 20px;
    max-width: 100%;
  }
  
  .product-card-demo {
    padding: 20px;
  }
  
  .product-image {
    height: 250px;
  }
  
  .product-info {
    padding: 20px;
  }
  
  .product-title {
    font-size: 1.2rem;
  }
  
  .current-price {
    font-size: 1.3rem;
  }
  
  .btn {
    padding: 10px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .product-actions-bottom {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  // Obtener elementos del DOM
  const productCard = document.querySelector('.product-card');
  const wishlistBtn = document.querySelector('.wishlist');
  const quickViewBtn = document.querySelector('.quick-view');
  const compareBtn = document.querySelector('.compare');
  const addToCartBtn = document.querySelector('.add-to-cart');
  const buyNowBtn = document.querySelector('.buy-now');
  const colorOptions = document.querySelectorAll('.color-option');
  
  // Agregar a lista de deseos
  wishlistBtn.addEventListener('click', function() {
    this.classList.toggle('active');
    const isActive = this.classList.contains('active');
    this.textContent = isActive ? '❤️' : '♡';
    this.title = isActive ? 'Eliminar de Lista de Deseos' : 'Agregar a Lista de Deseos';
    
    // Agregar animación
    productCard.classList.add('pulse');
    setTimeout(() => {
      productCard.classList.remove('pulse');
    }, 500);
    
    // Mostrar notificación
    showNotification(isActive ? '¡Agregado a la lista de deseos!' : 'Eliminado de la lista de deseos');
  });
  
  // Vista rápida
  quickViewBtn.addEventListener('click', function() {
    showQuickView();
  });
  
  // Comparar
  compareBtn.addEventListener('click', function() {
    // Agregar animación
    productCard.classList.add('pulse');
    setTimeout(() => {
      productCard.classList.remove('pulse');
    }, 500);
    
    showNotification('Producto agregado a comparación');
  });
  
  // Agregar al carrito
  addToCartBtn.addEventListener('click', function() {
    // Agregar animación
    productCard.classList.add('pulse');
    setTimeout(() => {
      productCard.classList.remove('pulse');
    }, 500);
    
    // Cambiar texto del botón temporalmente
    const originalText = this.querySelector('.btn-text').textContent;
    this.querySelector('.btn-text').textContent = '¡Agregado!';
    this.querySelector('.btn-icon').textContent = '✓';
    
    setTimeout(() => {
      this.querySelector('.btn-text').textContent = originalText;
      this.querySelector('.btn-icon').textContent = '🛒';
    }, 2000);
    
    showNotification('Producto agregado al carrito');
  });
  
  // Comprar ahora
  buyNowBtn.addEventListener('click', function() {
    showNotification('Redirigiendo al checkout...');
    // En una implementación real, esto redirigiría al checkout
    setTimeout(() => {
      alert('¡Procediendo al checkout!');
    }, 1000);
  });
  
  // Selección de color
  colorOptions.forEach(option => {
    option.addEventListener('click', function() {
      // Eliminar clase activa de todas las opciones
      colorOptions.forEach(opt => opt.classList.remove('active'));
      
      // Agregar clase activa a la opción clickeada
      this.classList.add('active');
      
      // Agregar animación
      productCard.classList.add('pulse');
      setTimeout(() => {
        productCard.classList.remove('pulse');
      }, 300);
      
      showNotification('Color cambiado');
    });
  });
  
  // Mostrar notificación
  function showNotification(message) {
    // Crear elemento de notificación
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    notification.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      z-index: 1001;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.3s ease;
      font-weight: 500;
    `;
    
    document.body.appendChild(notification);
    
    // Animar entrada
    setTimeout(() => {
      notification.style.transform = 'translateY(0)';
      notification.style.opacity = '1';
    }, 100);
    
    // Eliminar después del retraso
    setTimeout(() => {
      notification.style.transform = 'translateY(20px)';
      notification.style.opacity = '0';
      setTimeout(() => {
        document.body.removeChild(notification);
      }, 300);
    }, 3000);
  }
  
  // Mostrar modal de vista rápida
  function showQuickView() {
    // Crear modal
    const modal = document.createElement('div');
    modal.className = 'quick-view-modal';
    modal.innerHTML = `
      <div class="modal-content">
        <h2>Audífonos Inalámbricos Premium</h2>
        <p>La información detallada del producto iría aquí...</p>
        <p>Audífonos inalámbricos de alta calidad con cancelación de ruido y 30 horas de duración de batería.</p>
      </div>
      <button class="close-modal">×</button>
    `;
    
    document.body.appendChild(modal);
    
    // Animar entrada
    setTimeout(() => {
      modal.classList.add('active');
    }, 100);
    
    // Cerrar modal
    const closeBtn = modal.querySelector('.close-modal');
    closeBtn.addEventListener('click', function() {
      modal.classList.remove('active');
      setTimeout(() => {
        document.body.removeChild(modal);
      }, 300);
    });
    
    // Cerrar al hacer clic en el fondo
    modal.addEventListener('click', function(e) {
      if (e.target === modal) {
        modal.classList.remove('active');
        setTimeout(() => {
          document.body.removeChild(modal);
        }, 300);
      }
    });
  }
});

              
Compatibilidad del Navegador

Chrome
≥ 50
Firefox
≥ 45
Safari
≥ 10
Edge
≥ 15
Tarjeta de Producto Animada

Vista Previa en Vivo

Compatibilidad del Navegador

Fragmentos de Código Relacionados

Interfaz de Chat Animada

Botón de Volver al Inicio Animado

Temporizador de Cuenta Regresiva Animado

Explora packs de plantillas
