Docs

[nathanr_]

Hi,

I have this set in custom css in essential grid which makes a black and white cover over the image and then shows the images true colour when you hover it:

.eg-home-wrapper .esg-entry-media img{
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale”); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.eg-home-wrapper:hover .esg-entry-media img{
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0’/></filter></svg>#grayscale”);
-webkit-filter: grayscale(0%);
}

and have this set in custom css in x theme:

.esg-media-cover-wrapper .esg-media-poster {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.esg-media-cover-wrapper:hover .esg-media-poster {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

It all works perfectly well, I just want to know how I can make the grey scale cover a darker grey?

Thank you
Nathan

[Nabeel A]

Hi Nathan,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[nathanr_]

This reply has been marked as private.

[Rad]

Hi there,

What do you mean by covering the dark grey with another grey? If that’s the case, then the image will stay in grey color even when hovered.

Thanks!

[nathanr_]

Hi,

At the moment the above code puts a grey cover over the images in Essential Grid (so they appear black and white) before hover then shows their true color when hovered over.

I simply want to make they grey cover over the images a darker grey, just not sure which bits of the code above I need to change?

Thank you
Nathan

[Nabeel A]

Hey Nathan,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.eg-henryharrison-container {
    background-color: rgba(0,0,0,1) !important;
}

Let us know how this goes!

[nathanr_]

Hi,

No sorry that changed the wrong filter, it changed the filter once the image is hovered over.

The codes I have given you above changes the image before it is hovered over, it put a grey filter over the images thus making the image seem black and white, I would just like to know how I can make this filter darker?

Thank you
Nathan

[Nabeel A]

Hi again,

Please replace the previous code with this one:

.esg-media-cover-wrapper .esg-media-poster:after {
    background: rgba(0,0,0,0.5);
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.esg-media-cover-wrapper:hover .esg-media-poster:after {
    background: transparent;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts