project index Image hover mix-blend-mode

[jacobtegel]

I would like to apply the

mix-blend-mode difference

to a column in the project overview, since we are using the imagehover addon with images in the background

https://www.blila.de/projektindex/

however

.lay-projectindex-col {
	mix-blend-mode: difference !important;
}

doesn’t seem to be working; is there any technical restrictions to that or do i just have an error in the code? thanks!

[arminunruh]

.type-projectindex{
mix-blend-mode: difference !important;
}

it needs to be this css instead of your css!

additionally, you might want to make the color of the right hand texts white on hover:

.lay-projectindex-row:hover .lay-projectindex-col-tags{
color: white!important;
}

.lay-projectindex-row:hover .lay-projectindex-col-year{
color: white!important;
}

or black maybe.

cause atm they are purple and because they are mix blend mode difference, they become green on white bg:

[jacobtegel]

amazing! thank you so much! @arminunruh

[jacobtegel]

hey @arminunruh briefly coming back to this, just wondering if it would therefore not be possible to have only a single row change blend mode? while your solution works well, every other row will turn invisible because the black text will turn white.

[arminunruh]

Can you please send:

• a link to this forum topic
• your website address
• /wp-admin/ username and password
  to: info@laytheme.com

i need to try this out by changing ur css, im not sure if i can write the correct css on the fly

[arminunruh]

hey so i had to write js to make this work:

<script>
// make all year and tag texts white for projectindex when doing a mouseover, so mix blend mode difference works for them
jQuery(document).on("mouseenter", ".lay-projectindex-row", function(){
    jQuery(this).siblings().each(function(){
        jQuery(this).find(".lay-projectindex-col-tags").css("color", "white");
        jQuery(this).find(".lay-projectindex-col-year").css("color", "white");
    });
});
jQuery(document).on("mouseleave", ".lay-projectindex-row", function(){
    jQuery(this).siblings().each(function(){
        jQuery(this).find(".lay-projectindex-col-tags").css("color", "");
        jQuery(this).find(".lay-projectindex-col-year").css("color", "");
    });
});
</script>

this will make it work in combination with the css you already have:
http://laythemeforum.com:4567/topic/11125/project-index-image-hover-mix-blend-mode/2

i added it to

[jacobtegel]

amazing, thank you so much!