Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. How to make Image appear when hovering over Project Title in Menu

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

Scheduled Pinned Locked Moved General Discussion
hovermouseover
6 Posts 4 Posters 603 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    reallybadatstuff
    wrote on last edited by
    #1

    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!!!

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      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

      www.mariusjopen.world

      1 Reply Last reply
      0
      • R Offline
        R Offline
        reallybadatstuff
        wrote on last edited by
        #3

        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>
        }
        
        
        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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

          www.mariusjopen.world

          1 Reply Last reply
          0
          • S Offline
            S Offline
            sonnisc
            wrote on last edited by
            #5

            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

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              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

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              💿 Email me here: 💿
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              arminunruhA
              arminunruh
              F
              francesco
              L
              lurchifon
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search