Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Can anyone help me to make a duotone CSS effect?

    General Discussion
    duotone css
    1
    1
    728
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • DMB
      DMB last edited by DMB

      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

      1 Reply Last reply Reply Quote 0
      • First post
        Last post

      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

      Thanks!

      Online Users

      H
      T
      A

      Recent Topics

      • A

        Designer Websites for free Lay Theme.

      • A

        Broken images

      • A

        Image hover -> Image on image

      • D

        Projects private / public

      laytheme.com