Blend modes in CSS Editor not working

Hi Wristy,

Not sure what CSS editor you are using, or what CSS you have added, so it’s hard to say what the issue might be.

Please provide a link to your site and the CSS you’ve tried to use.

Thanks!

background-blend-mode: multiply;

Isn’t recognised in the CSS Editor under Appearance or the Custom CSS section in the Customize editor.

Sorry can’t link because the code is removed when I try to save it.

What’s the deal?

Hi Wristy,

The CSS rule is incomplete. It is missing the selector and both curly brackets (opening and closing).

If you need more help, please provide a link to your site, or at least the name of the theme you are using. It sounds like you are using a theme or plugin that adds a CSS edit screen. Would need to know what theme or plugin in order to help you narrow down the issue.

Thanks!
Christi

Alright I’ve been a bit vague.

Here is the code I’m using:

.project .thumb:hover .overlay {
	cursor: pointer;
	height: 100%;
	left: 0;
	opacity: .85;
	top: 0;
	width: 100%;
	background-color: #40104e !important;
	background-blend-mode: multiply;
}

On this page: https://www.danjwilliams.com.au

The rest of the attributes work perfectly except background-blend-mode.

I’m fairly certain I’m not using a custom editor, there’s a CSS edtor in the Appearance > Customize section of all themes no?

This guy has the exact same issues as me: https://www.ads-software.com/support/topic/background-blend-mode-multiply?replies=4

Thanks for your help Christi.

You’re welcome! Since that is a premium theme, you would normally need to contact your theme developer to ask them why it’s not recognized and saving:

https://themebeans.com/contact/

With that being said, I do see background-blend-mode: multiply; when I inspect your site’s CSS in Safari or Firefox. That indicates that it is being saved in your CSS editor.

I think the issue may be that you are not seeing the effect you want to achieve. The overlay div sits on top of the span where the actual image is. Because background-blend-mode works in conjunction with background color and/or background image on a particular element, it’s not going to blend with the image that is behind the overlay. Try decreasing the opacity instead and just remove the background-blend-mode.

Also, instead of using !important, try a little more specificity and add #projects before your selector.

Hope this helps!

did you get this working? still not working for me…

Hi Drewstain,

If you are using the same theme and still having trouble, please contact your theme developer:

https://themebeans.com/contact/

If you are using a different theme, please post your own question in the appropriate forum.

Thanks!

Background blend mode is not supported if you use 2 different divs.

I see you want to use a hove that will blend in on the image that is not coded in the same div.

you can use blend mode like this:

.project .thumb {
    background-image: url(test.png);
    background-color: red;
    background-blend-mode: multiply;
  }

thats the way to do it not in a hover.

If you would like a hover that will do the blend you need to do it this way.

So make a hover with the same image and a blend in color or image.

So the hover will overlay that iamge with the same image but than with a blended color.

.project .thumb:hover {
    background-image: url(test.png);
    background-color: red;
    background-blend-mode: multiply;
  }

Thanks justinvdv, I made that same discovery when Messi g with the code, because it uses two separate divs to create the effect then any overlay is null as it needs all elements in the same div to work.