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. Hover on text with image showing

Hover on text with image showing

Scheduled Pinned Locked Moved General Discussion
21 Posts 4 Posters 1.3k 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.
  • L Offline
    L Offline
    lauramas
    wrote on last edited by
    #1

    Hey, is there an easy way to make an image appear when you hover on a text?

    1 Reply Last reply
    0
    • edgrbnzE Offline
      edgrbnzE Offline
      edgrbnz
      wrote on last edited by edgrbnz
      #2

      Short answer: No.

      Long answer: This isn’t something that’s done sooo easily. Depending on the desired outcome there’s HTML, CSS and jQuery involved. Here is one topic that covers what you described – Also use the search function of forum 👉 There are dozens of other posts regarding this kind of behaviour / interaction.

      ✦ ✦ ✦

      1 Reply Last reply
      0
      • L Offline
        L Offline
        lauramas
        wrote on last edited by
        #3

        thank you so much, will have a look if something can work :)

        1 Reply Last reply
        0
        • daniD Offline
          daniD Offline
          dani
          wrote on last edited by
          #4

          hi,

          this can be done with css or js, but the main issue is with positioning since LAY grid is flex based. also pre-loading the images has to be done manually, unless you include them in the grid, but hide them.
          see an example here (hover over instrumentatirum texts).

          http://duoxamp.com/instrumentarium/

          d

          1 Reply Last reply
          0
          • L Offline
            L Offline
            lauramas
            wrote on last edited by
            #5

            Thanks a lot dani :)

            Actually I managed to do it, I used this tutorial and installed this jQuery UI Widgets plugging following these steps:
            https://harleyshelphut.com/how-to-make-images-appear-when-you-hover-over-text-in-wordpress/

            I'm not so familiar with developing and coding and for some reason I can't get rid of a white box around the image with a line, that's my problem right now. Any ideas on how to solve it? Thank you!

            1 Reply Last reply
            0
            • daniD Offline
              daniD Offline
              dani
              wrote on last edited by
              #6

              can you post a link to your code/site?

              1 Reply Last reply
              0
              • L Offline
                L Offline
                lauramas
                wrote on last edited by
                #7

                laura-mas.com/about :)

                1 Reply Last reply
                0
                • daniD Offline
                  daniD Offline
                  dani
                  wrote on last edited by
                  #8

                  the css style is built into the widget (js) so it's not easily editable. (disadvantage of using plugins).

                  try to find something here that does the same thing: https://codepen.io/

                  i can help you implement it when you find something.

                  dani

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

                    Dear @lauramas
                    if the images would always show up at the same spot I would recommend to build it yourself with jQuery and CSS. But the images need to be relative to the word which is hovered – that makes it more complex.

                    What I saw is that you are actually very close with your solution.

                    You could use CUSTOM CSS with !important to get it to look like how you want.

                    Best!

                    Marius

                    www.mariusjopen.world

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

                      Can you post a link to this plugin you use?

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      • daniD Offline
                        daniD Offline
                        dani
                        wrote on last edited by
                        #11

                        i looked at the plugin and the complicated part is that the styling is built into the plugin. there is no separate css code.

                        1 Reply Last reply
                        0
                        • daniD Offline
                          daniD Offline
                          dani
                          wrote on last edited by dani
                          #12

                          try this... only css

                          https://codepen.io/cestdani/pen/vYYxvwV

                          1 Reply Last reply
                          0
                          • daniD Offline
                            daniD Offline
                            dani
                            wrote on last edited by
                            #13
                            This post is deleted!
                            1 Reply Last reply
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on last edited by
                              #14

                              Dear @dani
                              can you not overwrite those CSS things or isolate them from the code in the plugin?

                              Best!

                              Marius

                              www.mariusjopen.world

                              1 Reply Last reply
                              0
                              • daniD Offline
                                daniD Offline
                                dani
                                wrote on last edited by
                                #15

                                it's too much work!
                                it could be useful to add some kind of hover function in laytheme, since many people ask for it.

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

                                  Dear @dani
                                  good input. We will write it down.

                                  Best!

                                  Marius

                                  www.mariusjopen.world

                                  1 Reply Last reply
                                  0
                                  • L Offline
                                    L Offline
                                    lauramas
                                    wrote on last edited by
                                    #17

                                    hey guys, thanks for this, just saw it now. @mariusjopen I used already the jQuery plugin and CSS (at least I think it is, I copy+pasted a code that I found online and changed the image name on it) but my current problem is that I can't get rid of the white box on the back of the images :( any ideas on how to do that in a simple way? my page is laura-mas.com/about

                                    This was the code I used on the source code inside the "add text" function:

                                    <span style="background-color: #ffffff;" data-tooltip="http://s1.postimg.org/kpmbwqe73/Spices.jpg"><strong>

                                    And this was the code that I added to the J Query plugin after I installed it:

                                    jQuery(document).ready(function($) {
                                    $( document ).tooltip({
                                    items: "[data-tooltip]",
                                    content: function() {
                                    var element = $( this );
                                    var text = element.text();
                                    var url = element.attr('data-tooltip');
                                    return "<img class='map' alt='" + text +
                                    "' src='" + url + "'>";
                                    }
                                    });
                                    });

                                    thank you so much!

                                    1 Reply Last reply
                                    0
                                    • daniD Offline
                                      daniD Offline
                                      dani
                                      wrote on last edited by
                                      #18

                                      @lauramas said in [Hover on text with image showing]

                                      try adding a class called clean

                                      return "<img class='map clean' alt='" + text +
                                      "' src='" + url + "'>";

                                      and in your css, add this

                                      .clean {
                                      background-color: none !important;
                                      border: none !important;
                                      }

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

                                        Dear @lauramas
                                        it is difficult because you cannot inspect the image. Everytime I move my cursor on the new image, it disappears. Is there a way to make it stay and then edit the CSS?

                                        Best!

                                        Marius

                                        www.mariusjopen.world

                                        daniD 1 Reply Last reply
                                        0
                                        • mariusjopenM mariusjopen

                                          Dear @lauramas
                                          it is difficult because you cannot inspect the image. Everytime I move my cursor on the new image, it disappears. Is there a way to make it stay and then edit the CSS?

                                          Best!

                                          Marius

                                          daniD Offline
                                          daniD Offline
                                          dani
                                          wrote on last edited by
                                          #20

                                          @mariusjopen you can hover the image, and in the hover state (in chrome) select 'inspect'. that will show you the css for the hover state.

                                          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
                                          A
                                          antonia_viola
                                          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