تصميم كروت تركيز (Focus Cards) بتأثير الـ Blur والتكبير عند المرور — احترافي وعصري

<div class='cards-container'> <div class='card-row top'> <div class='focus-card' style='--bg:url('img1.jpg')'> <h2>CRIMSON FIRE</h2> <p>Passion and Energy</p> </div> </div> <div class='card-row bottom'> <div class='focus-card' style='--bg:url('img2.jpg')'> <h2>AZURE OCEAN</h2> <p>Calm and Depth</p> </div> <div class='focus-card' style='--bg:url('img3.jpg')'> <h2>EMERALD NATURE</h2> <p>Life and Growth</p> </div> </div> </div> نسخ الكود

CSS

body { background: #1b1e2b; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: "Poppins", sans-serif; } .cards-container { display: flex; flex-direction: column; gap: 30px; text-align: center; } .card-row { display: flex; justify-content: center; gap: 40px; } .focus-card { width: 340px; height: 200px; background: var(--bg) center/cover no-repeat; border-radius: 20px; padding: 20px; color: white; position: relative; transition: 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; box-shadow: 0 15px 40px rgba(0,0,0,0.4); } .focus-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 1px; } .focus-card p { margin: 5px 0 0; opacity: 0.9; } /* الكروت كلها */ /* لما الماوس يدخل منطقة الكروت → كل الكروت يحصلها blur */ .cards-container:hover .focus-card:not(:hover) { filter: blur(4px); transform: scale(0.93); opacity: 0.7; } /* الكرت اللي عليه الماوس → يشيل منه blur + يكبر */ .focus-card:hover { filter: blur(0) !important; transform: scale(1.15) !important; opacity: 1 !important; z-index: 10; } /* -------- Responsive -------- */ @media (max-width: 768px) { .card-row { flex-direction: column; } .focus-card { width: 300px; height: 180px; } } نسخ الكود

يمكنك تعديل الخلفيات، حجم التكبير، ودرجة الـ Blur حسب ما يناسب تصميم موقعك.

قابلية التخصيص

• الصور والخلفيات: استخدم صورك الخاصة أو خلفيات جاهزة.

• العناوين والنصوص: أضف نصوصًا داخل الكروت باستخدام عناصر <h3> أو <p>.

• درجة التكبير عند Hover: يمكن تعديلها عبر transform: scale().

• نسبة التمويه (Blur): تعديل قيمة filter: blur().

• عدد الكروت وتوزيعها: إضافة أو إزالة كروت حسب الحاجة.

• الألوان والخطوط: يمكن تعديل النصوص لتتناسب مع هوية الموقع.

أمثلة على الاستخدام

• بورتفوليو المصممين: عرض أعمالك بشكل تفاعلي وجذاب.

• عرض المنتجات: إبراز المنتج المختار عند المرور عليه.

• صفحات الهبوط: جذب الانتباه إلى عناصر مهمة داخل الصفحة.

• أقسام Highlight داخل الموقع: إبراز محتوى محدد بطريقة جذابة.

نصائح عملية

• استخدم صور عالية الجودة لتظهر بشكل واضح عند التكبير.

• يمكن دمج التأثير مع أنيميشن CSS إضافية لإضافة حركة سلسة عند ظهور الكروت.

• حافظ على تناسق الألوان بين الخلفيات والنصوص لتحسين تجربة المستخدم.