How to make Image appear when hovering over Project Title in Menu

[reallybadatstuff]

Hello!

I am trying to code it so when you hover over a Project Title in my top menu, an correlating image appears in the middle of the homepage. So when you hover over NanoTech 2018, the NanoTech 2018 image appears. And when you hover over The Planetary Society, the Planetary Society image appears etc etc.

I want this to only happen in the homepage as well.

Below is a reference code I was trying to use
https://stackoverflow.com/questions/42686679/display-image-when-hover-over-text

My url is https://www.susannasuh.info/ and I'm using Google Chrome as my browser.

The image I wanted to appear for NanoTech is:
https://www.susannasuh.info/wp-content/uploads/2019/12/CD4-Logo.gif

Thank you for any help you can give, very much appreciate it!!!

[mariusjopen]

Dear @reallybadatstuff
this is possible with CUSTOM JS and CSS.

Did you have a look here?
http://laytheme.com/documentation.html#custom-javascript
Best!

Marius

[reallybadatstuff]

Yes! It was super helpful, I've customizing most of my website referencing that link and the forums even though I'm completely new to css and js.

I found the code below on a previous forum post about Hovering and Images, and I've been trying to modify it below for my website. I think the big problem I keep running into when modifying this code is that when I try to modify the hoverFolio-links and replace it with my project titles/links in my menu I probably just don't have the code grammar right so it breaks :'(

I've been trying to code it so my project titles in the menu are in their own a classes so they can be called out but I'm not too sure what I'm doing wrong...

Custom HTML at top:

<script>
// Hover Folio
    function hover_folio() {
        var wrapper = $('.hoverFolio');

        if (!wrapper[0] || wrapper[0].hoverFolio) {
            return;
        }

        wrapper[0].hoverFolio = true;

        var images = wrapper.find(".hoverFolio-image");
        var links = wrapper.find(".hoverFolio-link");

        var currentImage;

        links.each(function (index) {
            $(this).on("mouseenter", function () {
                if (currentImage) {
                    currentImage.hide();
                }

                currentImage = images.eq(index);

                if (currentImage) {
                    currentImage.show();
                }
            });
        });

        links.on("mouseleave", function () {
            if (currentImage) {
                currentImage.hide();
            }
        });
    }
    $(document).ready(function() {
       hover_folio();
       // Every time a new page is shown, try to initialize the hoverFolio effect
       window.laytheme.on('newpageshown', hover_folio)
    });
}(jQuery))
</script>

Custom CSS:

.hoverFolio {
/*basic styling for your text object*/
    margin: auto !important;
}

.hoverFolio-links {
/*that’s the wrapper for the links which also defines the image height in relation to your text block*/
    position: relative;
    z-index: 1;
    padding: 5vw 0;
}

.hoverFolio .hoverFolio-images img.hoverFolio-image {
/*that’s your image positioning*/
    position: absolute;
    object-fit: contain;
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: none;
}

Hover golio (gridder Content):
Paste into code-view of the gridder Element

<p class="hoverFolio-links">
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Lorem</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Ipsum</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Dolor</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Sit</a>,
	<a class="hoverFolio-link" href="https://linktosomewhere.com">Amet</a>,
</p>

<div class="hoverFolio-images">
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
	<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
</div>
}

[mariusjopen]

Dear @reallybadatstuff
two things.

Functions do not get called like this:

       hover_folio();
       // Every time a new page is shown, try to initialize the hoverFolio effect
       window.laytheme.on('newpageshown', hover_folio)
    });

Have another look in the documentation :D

Also have a look in this: https://wiki.selfhtml.org/wiki/JavaScript/Objekte/this

Best!

Marius

[sonnisc]

Dear @reallybadatstuff,
have you found a solution/a way to code the thing you wanted to archieve? I'm looking for a code to accomplish a similar thing on my new website – how to show a hovering image when hovering over the project titles that I put into my secondary menu. The image hover add-on only works on the inserted text of a project I suppose, not on the actual titles..
I also am new to css and js and don't know much about it yet;
so I'm just wondering if it worked out for you and how you coded it. If not, I'll try to read further into the topic also :-)
All the Best,
Sonni

[Richard]

Dear @sonnisc

As a first step do these links help you?

http://laythemeforum.com:4567/topic/6186/image-hover-add-on-on-menu-items/2

http://laythemeforum.com:4567/topic/6087/imagehover-on-element-grid-lightbox-on-carousel/2

Best wishes
Richard