novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KPI cards: icon watermark membesar halus saat hover

Browse Source 
- group + transition-all duration-500 ease-out pada icon watermark
- group-hover:scale-150 (membesar 1.5x) + opacity 10% → 25%
- Berlaku di 4 kartu KPI (hari ini, total, siswa aktif, SP draft)
This commit is contained in:
Novy San87
2026-08-03 18:03:22 +07:00
parent d0d1dd74c2
commit 0356c8b2e2
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/index.blade.php
+8 -8
View File
@@ -12,8 +12,8 @@
{{-- Gradient Stats Cards --}} {{-- Gradient Stats Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm stat-card-glow transition-all duration-200"> <div class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10"> <div class="absolute right-0 top-0 w-20 h-20 opacity-10 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
<i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i> <i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i>
</div> </div>
<div class="relative z-10"> <div class="relative z-10">
@@ -22,8 +22,8 @@
<p class="text-[10px] text-white/50 mt-0.5">data terbaru</p> <p class="text-[10px] text-white/50 mt-0.5">data terbaru</p>
</div> </div>
</div> </div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm stat-card-glow transition-all duration-200"> <div class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10"> <div class="absolute right-0 top-0 w-20 h-20 opacity-10 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
<i class="fa-solid fa-list-check text-white text-6xl"></i> <i class="fa-solid fa-list-check text-white text-6xl"></i>
</div> </div>
<div class="relative z-10"> <div class="relative z-10">
@@ -32,8 +32,8 @@
<p class="text-[10px] text-white/50 mt-0.5">semua waktu</p> <p class="text-[10px] text-white/50 mt-0.5">semua waktu</p>
</div> </div>
</div> </div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm stat-card-glow transition-all duration-200"> <div class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10"> <div class="absolute right-0 top-0 w-20 h-20 opacity-10 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
<i class="fa-solid fa-users text-white text-6xl"></i> <i class="fa-solid fa-users text-white text-6xl"></i>
</div> </div>
<div class="relative z-10"> <div class="relative z-10">
@@ -42,8 +42,8 @@
<p class="text-[10px] text-white/50 mt-0.5">terdata</p> <p class="text-[10px] text-white/50 mt-0.5">terdata</p>
</div> </div>
</div> </div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm stat-card-glow transition-all duration-200"> <div class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10"> <div class="absolute right-0 top-0 w-20 h-20 opacity-10 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
<i class="fa-solid fa-file-lines text-white text-6xl"></i> <i class="fa-solid fa-file-lines text-white text-6xl"></i>
</div> </div>
<div class="relative z-10"> <div class="relative z-10">