Hover on text with image showing

---

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

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.

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

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

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!

can you post a link to your code/site?

laura-mas.com/about :)

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

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

Can you post a link to this plugin you use?

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

try this... only css

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

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

Best!

Marius

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

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

Best!

Marius

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!

@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;
}

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

@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.