Hover on text with image showing

[lauramas]

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

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

[lauramas]

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

[dani]

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

[lauramas]

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!

[dani]

can you post a link to your code/site?

[lauramas]

laura-mas.com/about :)

[dani]

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

[mariusjopen]

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

[mariusjopen]

Can you post a link to this plugin you use?

[dani]

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

[dani]

try this... only css

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

[dani]

This post is deleted!

[mariusjopen]

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

Best!

Marius

[dani]

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

[mariusjopen]

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

Best!

Marius

[lauramas]

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!

[dani]

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

[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

[dani]

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