با استفاده از CSS یک کارت تصویر بسازید که تصویر پس‌زمینه با یک لایه رنگی به کمک background-blend-mode یا mix-blend-mode ترکیب شود و هنگام هاور روی کارت شدت ترکیب (مثلاً از multiply به screen یا با تغییر opacity لایه رنگی) تغییر کند.

از ویژگی‌های CSS مانند background-blend-mode و/یا mix-blend-mode برای ترکیب رنگ و تصویر استفاده کنید؛ برای کنترل وضعیت هاور از یک pseudo-element (مثل ::before) به‌عنوان لایه رنگی با position و z-index مناسب بهره ببرید و با transition روی opacity یا رنگ، افکت تغییر ترکیب را ایجاد کنید چون خود blend-mode قابل انیمیت نیست. نکات: برای محدود کردن تاثیر mix-blend-mode از isolation: isolate استفاده کنید، رزولوشن و دسترسی را در نظر بگیرید و برای مرورگرهای قدیمی یک حالت fallback با رنگ ساده یا opacity ارائه دهید.