Docs

[Piranhabar_web]

Hi guys,

Hope you are keeping well?

1) Guys, I’m wonder if it’s possible to animate on a border with a mouse-on hover using the grid plugin. Here is my current setup: http://2016testing.piranhabar.ie/wordpress/branded_content/

2) And if that’s possible, can I add a group of colors for the border to randomly pick (see attached images for reference),

3) Actually one last thing, if I can’t do this with the Grid (as I can’t use skin builder), can I do it using the Essential grid plugin?

Many thanks in advance,

Barry

[Lely]

Hi Barry,

1.) Please add the following CSS on Appearance > Customize > Custom > Edit Global CSS

.esg-entry-cover:hover {
    box-shadow: inset 0 0 0 5px green;
}
.esg-entry-cover {
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px #f45e61;
    webkit-transition: color 0.25s;
    transition: color 0.25s;
}

Feel free to customize the properties. See result:http://screencast-o-matic.com/watch/cDQvXvjOne

2.) 3.) This might need specific class. But then I can’t see an option for thaton Essential Grid. You may double check it on their documentation.

Hope this helps.

[Piranhabar_web]

Thank you Lehy,

Really appreciate your help.

I’m just wondering if it’s possible to have the borders outside the box, as they are currently being overlayed by the semi transparent black:

http://2016testing.piranhabar.ie/wordpress/branded_content/

Finally, is it possible to get rid of the slight wobble that occurs with the zoom featured in Essential Grid?

[Jade]

Hi there,

Kindly update the CSS to:

.esg-entry-cover:hover {
    box-shadow: 0 0 0 5px green;
}

Then check out this page about how to remove the animation on hover: https://www.themepunch.com/faq/show-skin-content-without-hover/

Hope this helps.

[Piranhabar_web]

This reply has been marked as private.

[Nabeel A]

Hi again,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Piranhabar_web]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials. I did test the same setup on my test site and it seems part of essential grid’s Media Animation. When I set this to NONE the shaking stop. Please check.

[Piranhabar_web]

Hi Lely,

Thanks for your response.

I’m afraid that doesn’t really work however, as I’d like to keep the zoom animation.

After further investigation I’ve discovered that it’s a google chrome issues, however you guys every heard of any other essential grid issues involving chrome?

Many thanks

[Lely]

Hi There,

There’s no known issues involving essential grid and chrome. I did some research and found that this might because of matrix3d transform value. Can you try adding this custom CSS:

.esg-grid .mainul li.eg-washington-wrapper {
    transform: scale(1) !important;
}

See this:http://screencast-o-matic.com/watch/cD6hFOjvn8

Hope this helps.

[Piranhabar_web]

Thanks so much Lely, worked perfectly!

[Rupok]

I am glad that it worked. Feel free to let us know if you need any other help.

Have a nice day!

[Author]

Posts