cardproductinteractivehoverzoomanimatedecommerce

Product Image with Zoom Effect

Карточка продукта с эффектом увеличения при наведении. Интерактивный UI-элемент для интернет-магазинов, улучшающий демонстрацию товаров.

Live Preview

Prompt

<div class="relative w-full max-w-lg mx-auto p-4">
  <div class="bg-white rounded-xl shadow-xl overflow-hidden group cursor-pointer">
    <div class="aspect-square overflow-hidden bg-gray-100">
      <img src="https://www.kruidvat.nl/medias/sys_master/prd-images/h65/h71/34653530390558/prd-front-6162917-1_600x600/prd-front-6162917-1-600x600.jpg" alt="Product Detail" class="w-full h-full object-contain group-hover:scale-110 transition-transform duration-500 ease-in-out" loading="lazy" />
    </div>
  </div>
</div>

All Prompts