Essential grid and mix-blend-mode

[netoui]

Hi! I really hope that you can help me with this. I will try to explain myself.
In my site I’m using essential grid to show some posts. I’m using a skin that I modified. The skin shows the featured image in every post in black and white in Idle mode, and in Hover mode the picture is shown in its original color. I would like to add a background color to every image in Idle mode and I would like to add in CSS the mix-blend-mode property, so the image won`t be in black and white but in blue and white.

The site is www.cchv.cl. If you could see in the slider of the HOME of my site there is a picture in blue and white. That’s what i want to achieve but I really don`t know how.

Thanks in advance

[nabeel]

Hi there,

Thanks for writing in! You can achieve the similar effect with custom CSS, try adding the following code in the Theme Options > CSS:

.esg-entry-cover:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all .3s linear;
    background: rgba(18, 45, 251, 0.35);
}

.esg-entry-cover:hover:before {
    background: none;
}

Here is a similar example that you can take look and use it in your site https://codepen.io/jr/pen/rliKq

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[netoui]

THANKS! I achieve what I wanted to do copying the code you just gave me, changing this value and adding the mix-blend-mode:

background: rgba(6, 14, 159, 1);
mix-blend-mode: screen;
}

HUGE THANKS!

[friech]

We are delighted to assist you with this.

Cheers!