Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Hover on text with image showing

    General Discussion
    4
    21
    494
    Loading More Posts
    • 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
      lauramas last edited by

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

      1 Reply Last reply Reply Quote 0
      • edgrbnz
        edgrbnz last edited by edgrbnz

        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 Reply Quote 0
        • L
          lauramas last edited by

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

          1 Reply Last reply Reply Quote 0
          • dani
            dani last edited by

            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 Reply Quote 0
            • L
              lauramas last edited by

              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 Reply Quote 0
              • dani
                dani last edited by

                can you post a link to your code/site?

                1 Reply Last reply Reply Quote 0
                • L
                  lauramas last edited by

                  laura-mas.com/about :)

                  1 Reply Last reply Reply Quote 0
                  • dani
                    dani last edited by

                    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 Reply Quote 0
                    • mariusjopen
                      mariusjopen Global Moderator last edited by

                      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 Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Can you post a link to this plugin you use?

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • dani
                          dani last edited by

                          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 Reply Quote 0
                          • dani
                            dani last edited by dani

                            try this... only css

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

                            1 Reply Last reply Reply Quote 0
                            • dani
                              dani last edited by

                              This post is deleted!
                              1 Reply Last reply Reply Quote 0
                              • mariusjopen
                                mariusjopen Global Moderator last edited by

                                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 Reply Quote 0
                                • dani
                                  dani last edited by

                                  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 Reply Quote 1
                                  • mariusjopen
                                    mariusjopen Global Moderator last edited by

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

                                    Best!

                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 0
                                    • L
                                      lauramas last edited by

                                      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 Reply Quote 0
                                      • dani
                                        dani last edited by

                                        @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 Reply Quote 0
                                        • mariusjopen
                                          mariusjopen Global Moderator last edited by

                                          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

                                          dani 1 Reply Last reply Reply Quote 0
                                          • dani
                                            dani @mariusjopen last edited by

                                            @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 Reply Quote 0
                                            • First post
                                              Last post

                                            Before you post

                                            Use the Search Feature. Maybe there is already a solution to your issue.

                                            1. Update Lay Theme and all Lay Theme Addons
                                            2. Disable all Plugins
                                            3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                            4. Now see if your problem solved itself
                                            5. Go here, see if your problem is listed here:
                                            Troubleshooting

                                            When you post:
                                            1. Post a link to where the problem is
                                            2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                            Thanks!

                                            Online Users

                                            Recent Topics

                                            • N

                                              website blank.

                                            • S

                                              Theme crashed - because of Polylang?

                                            • S

                                              New fade-in / opacity bug?

                                            • A

                                              Unable to update lay theme / to login wp admin

                                            laytheme.com