flamur

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 🙏

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 😇

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