Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 13, 2017 at 6:18 pm #733272
    Chris_szumny

    Hi Guys,

    I just started using Enfold to build a new website and already have a question including the editing slider. So if you take the Enfold Demo (Home v1: Landing Page Style) you have a couple elements transitioning into the slider ( e.g. imac, macbook, ipad ). I would like the future elements im adding to the slider to multiply to the background. The thing is, im pretty new to CSS and the “ok Im gonna google it”-sort of a guy. But i cant figure out my mistake.

    Enfold is giving me the ability to change the style of every layer in the slider with custom css and this is the place im stuck. I tried different combinations like:

    {
    mix-blend-mode: multiply;
    }

    or

    {
    background-blend-mode;
    }

    I thought the mistake is maybe that i have to trigger the layer, so i tried applying attributes.

    something like

    imac {
    mix-blend-mode: multiply;
    }

    Im pretty sure im at the right spot but cant figure out the correct thing to type into the custom css.

    Can you help me with this? Thank you!

    January 15, 2017 at 7:16 am #733698
    Rikard

    Hey Chris_szumny,

    I’m not sure exactly what you are trying to achieve? Please try to explain a bit further. Looking at your CSS it looks like you are not targeting any elements so that’s probably why it’s not having any effect.

    Best regards,
    Rikard

    January 15, 2017 at 1:54 pm #733739
    Chris_szumny

    Hi Rikard,

    Basics of CSS Blend Modes

    I’d like to achieve the first blend mode (multiply) shown with the live demo. The red square is multiplying with the backgroundimage.

    Here is what im aiming to do as header.

    Before:
    https://postimg.org/image/hbj97mj3t/

    After:
    https://postimg.org/image/5xv410gab/

    I agree with you. I guess the targeting is the problem. So i want to save the left elements (red and blue) as .png and upload them to the site. Using the editing slider i want this elements to transition into the slider and have this multiply effect on it.

    Hope i was able to eyplain it to you further.

    Thank you!

    January 17, 2017 at 6:52 pm #734908
    Andy

    Hi,

    click on one of your sliders and open “Styles”. There is a Custom CSS field, where you can insert your custom code. If you need help with any customizations, we recommend to hire a freelance developer for this job: http://kriesi.at/contact/customization

    Best regards,
    Andy

    January 17, 2017 at 7:32 pm #734941
    Chris_szumny

    Thank you for not helping me at all…

    January 18, 2017 at 7:37 pm #735496
    Andy

    Hi,

    just put a code like this:

    background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;

    inside the Custom CSS field I mentioned of your LS. Adjust it as needed.

    Best regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.