Essential Grid - blurry / pixelized images after mouse over

Support
#1

Hi,

we noticed that Essential Grid images appear pixelized on “mouse out” when using Chrome. This issue is not visible in other browsers like Edge or Firefox. What can we do to fix the issue?

Thanks!

#2

Hey @nezzazvoni,

This could be some CSS code that blurs the image when you hover it but I am not certain if it is really causing it.

Is there a chance that you can provide us the URL of the site in question since you account has a lot of licenses in it.

Thank you.

#3

Sure, please see the attachment below.

#4

Hi @nezzazvoni,

Please add this code in X > Theme Options > CSS:

.esg-anime-blur .esg-entry-media {
    filter: blur(0px) !important;
}

Hope this helps.

#5

Hi,

that kind of helped - the blur effect is gone completely, no matter where the cursor is.

I guess this is also a solution, but I am just wondering - is there a way how to preserve the blur effect on mouse over without the undesireable post-effect?

Thanks a lot.

#6

Hi @nezzazvoni,

You can edit your Essential Grid skin using the Skin Editor feature.

https://www.themepunch.com/essgrid-doc/item-skin-editor/

Thanks,

#7

Hi,

I was referring to the problem mentioned above - there is clearly something wrong with the way Chrome is handling those effects in Essential Grid, because the image before and after “mouse over” is rendered in different quality. The point is, that we like the blurry effect on “mouse over”, we just want it to work properly everywhere (it works in Firefox, Edge…). Your fix disables this effect completely.

Also the headline under the image is now moving approx. 2px when activated, which also is not intended.

So is there a solution to keep this particular effect (which is actually a built-in skin) but without the pixelized image afterwards?

Thanks!

#8

Hi @nezzazvoni,

Thanks for clarifying. I checked the hover and the mouseout effect using Chrome and the feature image quality remains the same. Please scree the screencast on the Secure Note.

I have also asked another colleague to check it on Chrome and was also not able to replicate the issue you mentioned.

Please try to clear your browser and site cache then check again.

Thank you.

#9

Ok, I will try to do this.

#10

Thank you for testing, @nezzazvoni

#11

Hey @nezzazvoni,

Thanks for showing us and providing the OS and browser name. Because I’m using the same, I could replicate the issue.

It’s actually the scaling of the image container that is making the image look pixelated. This looks like a bug in Chrome on Windows but I’ll keep digging.

For now, you will need to disable the scaling by adding this code in Theme Options > CSS or your grid’s CSS.

.esg-anime-blur .esg-entry-media {
    transform: none !important;
}

Hope that helps.

#12

Hi there, It looks your code is working. Thank you for your help :slight_smile: .

#13

You’re welcome. Glad we’re able to help.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.