Creating an Inverted Image effect on Hover on

Support
#1

I Have created a essential Grid gallery and would like to know how can I make the image look inverted on hover only? and with no hover regular image is visible.

Do I need 2 images? or can we do this with code?

#2

Hi there,

Thanks for writing around! You can check out the following article https://www.themepunch.com/faq/black-and-white-hover-effect/

Hope this helps!

#3

yeah black and white thats cool but inverted is more of a teal color any other suggestions to get that effect?

#4

Hi there,

It’s possible with hover images but you’ll have to create those images first and apply them through CSS. Another way is this https://davidwalsh.name/invert-colors-css, but it may not work on some browsers. Either way, both require customization, you may follow the sample from that URL and apply it to your grid as custom CSS.

Thanks!

#5

I looked at the link but I dont get it I tried that code nothing happened. any other suggestions?
Can I add a second image to the image on essential grid, so when I hover its pointed to the inverted image I chose for the hover effect? I can make that image and upload to media center.

#6

Hello There,

The code may not be applicable in your browser or that you have applied it incorrectly. As this is already custom development, this is beyond the scope of our support. We only cover getting your site set up, bug fixes and minor cosmetic changes. Any additional or custom features and functions would be possible with custom development. You might need to contact someone to these customization for you.

By the way, there are essential grid skins that offers you to insert two version of the image. Please check out this examples:



Hope this helps.

#7

I could not see that function in the links you sent me , I would reach out to the developers of the plugin but I dont have a license for it you feature this plugin as a add on to your theme. I hope I dont have to go buy a license for it at Envato. Please help me find how to create this function. we have our grid set up and designed if we need to change skins thats fine. I just need to know how to have the

The grid image or visible image then add a hover image and we already have it linked to the post

Each Image would need to have its own cover or hover image is this possible

Thanks

#8

Hello There,

You can still achieve this in Essential grid. Please do this things.
1.) Create your grid.
2.) Use Wilbert as the skin

3.) Create a custom meta key in Meta Data handling

The name is not necessary, the handle is because this is what is define in the skin.

4.) Edit each of your post and insert the client’s icon image which will serve as your hover image.

5.) And lastly, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.eg-wilbert-wrapper .eg-wilbert-element-0 img {
    opacity: 0;
    transition: opacity 1s ease;
}

.eg-wilbert-wrapper .eg-wilbert-element-0:hover img {
    opacity: 1;
}

Hope this helps. Please let us know how it goes.

#9

Where do you find custom meta

#10

Custom meta can be created in Essential Grid > Meta Data Handling.

#11

ok found the section , thought I got it but it didnt work I put the code not working maybe Im confused or missed something . maybe you can tell me step by step 1 more time . thanks

#12

Hello There,

You did not supplied the Clients’s icon image which will serve the hover image. It is the #4 step in my previous reply. Is this a grid post or a custom grid? Simply edit your grid, edit the meta and supply the hover image.

Hope this make sense.

#13

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