Jump to content

How to code multiply overlay in wordpress


Recommended Posts


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,


Link to comment
Share on other sites

  • 3 weeks later...
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

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;


  • Like 1
Link to comment
Share on other sites

Posted (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 by flamur
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...