Disable the hover over for mobile essential grid

[theHCC]

Hello,

I’m hoping someone can assist with this. For my essential grid I have it set to blur on hover. It works beautifully for the desktop, however, on mobile, I would like to disable the hover so that it doesn’t require 2 clicks to access the link.

Thank you in advance for your help with this.

[details=Summary]
www.hirehenri.com is the website[/details]

[ruenel]

Hi @theHCC,

Thanks for writing in!

How did you add the blur? Is it by using a custom css? If that is the case, simply update your custom css and place it in @media block. For example;

.element {
   // some blur styling
} 

You will need to update it into this:

@media(min-width: 768px){
  .element {
     // some blur styling
  } 
}

This would mean that the styling will only applied to screen sizes greater than 768 pixels. In smaller screens, your style will not be applied.

Hope this helps.

[theHCC]

It’s actually a hover option in the essential grid settings. See image for reference.
Is it possible to disable this via web?

[lely]

Hi @theHCC,

There’s no option to remove it on Essential Grid settings so we will use the above suggestion by Ruenel. We will override the CSS made my EG. Here’s the CSS applied on your EG on homepage

.esg-anime-blur .esg-entry-media {
    transform: scale(1.15,1.15)!important;
    transform-origin: center center!important;
}

To override that on mobile

@media(max-width: 480px){
  #esg-grid-3-1 .esg-anime-blur .esg-entry-media {

    transform: unset !important;
    transform-origin: unset !important;
    filter: unset !important;
}
}

Add that CSS on your Page custom CSS when you edit on Content Builder.
Hope this helps.