Can anyone help me to make a duotone CSS effect?
-
Hi there,
I'm trying to make a CSS duotone just like this: https://codepen.io/james_gillen/pen/JGoKxO
(PS ignore the text, its just the image i am interested in)So far i have a full screen row (browser height sets row height), which i have assigned the HTML class 'test' and then this CSS:
.test { background-image: url(blahblah.jpg);
background-color:red;
background-blend-mode: screen;}That succesfully screens a red color over my image. So far so good.
But I want to have a two color duotone image like the Codepen above... Not sure if its really possible with Laytheme as I think it requires two Divs stacked on top of each other - is that correct? I'm not bad at CSS but not a pro, and i'm having diffuculty getting my head around how the code works in the Codepen...
If anyone can help that would be great.
Thanks,
Duncan
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it