با استفاده از CSS و خاصیت mix-blend-mode یک کارت حاوی تصویر پس‌زمینه و متن بساز به‌طوری‌که متن با حالت "screen" روی تصویر ترکیب شود و هنگام هاور به حالت "multiply" تغییر کند.

برای حل این مسئله از HTML ساده (یک div برای کارت و یک عنصر متن یا h) و CSS استفاده کنید؛ تصویر را به‌عنوان background-image کارت قرار دهید یا از یک تگ img استفاده کنید. خاصیت mix-blend-mode را روی عنصر متن یا یک لایه پوششی (با ::before یا ::after) تنظیم کنید و در حالت :hover آن را به "multiply" تغییر دهید؛ برای جلوگیری از ترکیب ناخواسته با پس‌زمینه صفحه از isolation: isolate روی کانتینر استفاده کنید. نکات: برخی حالت‌ها قابل transition مستقیم نیستند — در صورت نیاز می‌توانید با تغییر opacity و تغییر کلاس، افکت نرم‌تری ایجاد کنید و سازگاری مرورگرها را بررسی کنید.