flamur Posted May 19, 2022 Share Posted May 19, 2022 Hi, I should start by saying I am a total beginner at this and usually works on my first website using elementor. However I have come to a point where I cant use simple drag and drop to do what I want and need to use CSS. So I have been googleing to learn more and ofc read as much as I can on w3schools. But I do need help with this one. I am trying to use CSS code to get the same effect as I can get with elementor PRO for pictures. There I use a overlay effect that mixes a picture with a choosen color, with multiply effect. Looks good and works good with elementor. However when I try to do this with CSS code I dont really know how to do it. I have come this far that I atleast get some effect on the pictures - so I seem to atleast target the correct pictures I want 😅 However it does not look the same as elementor. I think the pictures I try to target also has some before and after coding applied if I "inspect" the code using firefox tool for inspection. Perhaps I need to somehow write extra CSS code so that some other effect on the picture gets blocked/deactivated somehow? Is this possible? So this is the code I am using now and trying to get to do the multiply overlay: /* custom header single resume */ .overlay-gradient::before { background: transparent; } .overlay-gradient::after { background: #3e59fe; opacity: .5; background-blend-mode: multiply; } /* custom header single job */ section.page-header-bg { padding-top: 282px; padding-bottom: 40px; } section.page-header-bg::after { background: #3e59fe; opacity: .5; background-blend-mode: multiply; } _________________ Do you know if this should work or is there any obvious beginner mistakes in this code? 🙈 Best regards, Flamur Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2022 Share Posted May 22, 2022 (edited) You are missing the content: property content:""; for :before and :after All other properties are applied this, its like a textual element. Edited May 22, 2022 by dsonesuk 1 Link to comment Share on other sites More sharing options...
flamur Posted June 7, 2022 Author Share Posted June 7, 2022 On 5/22/2022 at 6:53 AM, dsonesuk said: You are missing the content: property content:""; for :before and :after All other properties are applied this, its like a textual element. Thank you for the reply. I am sorry but I dont understand what you mean. Do you mean I need to somehow target a property/content? How do I do that or where can I read about how to do it? On 5/22/2022 at 6:53 AM, dsonesuk said: All other properties are applied this Do you mean all else is good? ____________________________________________________________ Also I got this reply from the theme creator after a question if there is any other effects to the cover images and he wrote this: "overlay-gradient:before has a dark layer overlay and the :after has the gradient overlay, other than that there is no other effect added." Is it possible to somehow write custom CSS so that this overlay before and after is removed? ____________________________________________________________ Many thanks for your help 😇 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2022 Share Posted June 7, 2022 its like using top:, left:, right: properties, if you don't have a position: set, with anything other than 'static', then top:, left:, right: properties will do nothing! So :before and :after are the same without content: being used body:after { content: "Hello World!";/*this can just be content: "";*/ /* below is applied only to selector using :after (or :before) with a content: property, without it you get nada */ display: flex; align-items: center; justify-content: center; position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; font-size: calc(3em + 5vw); color: white; z-index: 99999; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); text-align: center; white-space: nowrap; } 1 Link to comment Share on other sites More sharing options...
flamur Posted June 14, 2022 Author Share Posted June 14, 2022 (edited) Thank you for your help and efforts. I had to abandon what I tried to achieve. It seemed like not possible. Instead I just removed the effects and kept it simple instead. But many thanks for your time 🙏 Edited June 14, 2022 by flamur Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now