Kartu Produk Pepsi yang Memukau dengan CSS

Ingin membuat tampilan produk website Anda lebih hidup? Simak bedah kode CSS di balik animasi kartu produk Pepsi yang viral ini. Pelajari teknik transform, transition, dan absolute positioning di sini.

Dalam dunia desain web modern, interaksi mikro (micro-interactions) adalah kunci untuk membedakan website yang "biasa saja" dengan website yang "profesional". Salah satu cara paling efektif untuk menarik perhatian pengunjung adalah melalui efek hover pada kartu produk.

Baru-baru ini, sebuah cuplikan video menampilkan animasi CSS yang sangat halus menggunakan branding Pepsi. Animasi ini bukan hanya sekadar memunculkan gambar, tetapi menciptakan pengalaman visual 3D yang dinamis. Mari kita bedah bagaimana animasi dalam video tersebut bekerja dan teknik CSS apa yang digunakan untuk mencapainya.

Apa yang Terjadi dalam Animasi Ini?

Jika Anda perhatikan videonya, animasi ini memiliki beberapa tahapan transisi yang terjadi secara berurutan saat kursor diarahkan (hover) ke elemen kartu:

1. Keadaan Awal (Idle): Hanya terlihat logo Pepsi ikonik di tengah lingkaran dengan latar belakang gelap.

2. Keadaan Hover (Aktif):

   • Kartu melebar (expand).

   • Botol Pepsi muncul dengan efek pop-up (membesar dan berputar).

   • Latar belakang berubah menjadi biru solid.

   • Teks deskripsi dan tombol "Shop Now" muncul perlahan.

Berikut kode CSS

.card .product_img {
position: absolute;
transform: translate(-50%, -50%) scale(0) rotate(315deg);
transition: 0.5s ease-in-out;
}

.card:hover .circle::before {
transition-delay: 0.5s;
border-radius: 20px;
background: var(--clr);
}

.ring i:nth-child(2) {
border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
animation: animate 4s linear infinite;
}

/* Animasi Rotasi */
@keyframes animate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.ring:hover i {
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}

LINK SOURCE CODE

Silahkan download source codenya gratis dan untuk hasil tampilanya silahkan lihat pada video TikTok dibawah ini.

GET CODE    WATCH HERE.!

Kesimpulan

Video animasi Pepsi ini adalah contoh sempurna bagaimana CSS murni (tanpa JavaScript berat) dapat menciptakan pengalaman pengguna yang imersif. Kuncinya terletak pada permainan properti transform (untuk posisi dan ukuran) serta transition (untuk kehalusan gerak).

Bagi Anda para web developer, jangan ragu untuk bereksperimen dengan properti scale dan rotate pada proyek kartu produk Anda berikutnya!

Tertarik mencoba? Salin atau download kode di atas, lalu buka di editor teks Anda dan mulailah berkreasi, Selamat mencoba!

 Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami Dibawah ini: