Imagehover on Element Grid + Lightbox on Carousel

[rioma7]

I have read a couple of things about that but I am not sure and I was wondering if there is the possibility to use the image hover plugin on the Element Grid and the Lightbox option on the carousel slideshow.

If not, is there a possibility to code it? Thanks in advance!

[Richard]

Dear @rioma7

You are correct that currently the Imagehover function works separately from the Element Grid, as well as the mix of Lightbox & Carousel.

However i wish to help and set you in the right direction :)

This workaround will require some basic knowledge of HTML, CSS and a little JS.

We can add Custom Code through 'Lay-Options - Custom CSS & HTML' in the admin panel.

We must remember that any JS, jQuery added to Lay Theme is done by wrapping it in a 'newpage event':
https://laytheme.com/documentation.html#custom-javascript

And some info on CSS & Developer tools if needed:
https://www.khanacademy.org/computing/computer-programming/html-css

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

Ok :)

So within the Element Grid we can choose some example text, Add the desired link and then go into "Source Code"

Here within the Link tags <a> we can add a class called whatever we wish - i called mine 'special' :

& now on our frontend we can see that indeed the link now has a class that we can target called 'special' :

Now we need to create an image separately ( the downside to this option sorry ), Then i can right click the image in the gridder and set a Custom Class or ID to it:

I named mine 'magical' and indeed it has shown up:

Now we need to go to "Lay-options-Custom CSS & HTML" and add some code like this for example:

.magical {
    display: none;
}

.magical.cool{
    display:block !important;
}

Now with jQuery: When we Hover over "special" a class called 'cool' gets added to "magical"

 jQuery(".special").hover(function () {
    jQuery(".magical").toggleClass("cool");
 });

We must set the common ( $ ) sign to ( jQuery ) with wordpress.

Our Image that was invisible is now made visible when you hover over your text.
As for Styling the Image how you wish that is up to you and your design needs :)

I hope this Helps, Best of luck in your Lay Theme Journey and have a wonderful day

Best
Richard

[jennysslattery]

Hi,

I just recently purchased the Image Hover plug-in which works in the gridder but not when I'm using Element Grid. I now see here that currently this function doesn't work with Element Grid but was wondering if this was something that you were working on at all?

Thanks!

[rioma7]

@Richard-Keith thanks Richard. I'll try!

[Richard]

Dear @rioma7

Good luck! :)
Let me know how you go

Best
Richard