در CSS می‌تونی روی تصاویر افکت‌های مختلفی با خاصیت filter اعمال کنی. این افکت‌ها بدون نیاز به فوتوشاپ یا ویرایشگر تصویر، مستقیم در مرورگر اجرا می‌شن.

🔹 سینتکس

img {
  filter: effect(value);
}

می‌تونی چند افکت رو همزمان بذاری:

img {
  filter: grayscale(100%) blur(3px);
}

🔹 انواع فیلترها

1. Blur (تاری)

img {
  filter: blur(5px);
}

2. Brightness (روشنایی)

img {
  filter: brightness(150%);
}

3. Contrast (کنتراست)

img {
  filter: contrast(200%);
}

4. Grayscale (سیاه و سفید)

img {
  filter: grayscale(100%);
}

5. Hue-rotate (چرخش رنگ)

img {
  filter: hue-rotate(90deg);
}

6. Invert (معکوس کردن رنگ‌ها)

img {
  filter: invert(100%);
}

7. Opacity (شفافیت)

img {
  filter: opacity(50%);
}

8. Saturate (اشباع رنگ‌ها)

img {
  filter: saturate(300%);
}

9. Sepia (قدیمی / قهوه‌ای)

img {
  filter: sepia(100%);
}

🔹 ترکیب چند فیلتر

img {
  filter: brightness(120%) contrast(150%) sepia(50%);
}

🔹 هاور با فیلتر

img {
  transition: 0.5s;
}

img:hover {
  filter: grayscale(100%) blur(2px);
}

✅ وقتی موس روی عکس میاد، افکت‌ها اجرا می‌شن.

🔸 این فیلترها علاوه بر عکس، روی ویدیو و حتی بک‌گراندها هم قابل استفاده هستن!