Show Thumbnail when hover over text

[pauljuergens]

Hi Guys,

i am working on my Portfolio (https://www.paul-juergens.de) and i tried to add the feature, when hovering over the project Titel, the Project Thumbnails shows off. I wrote some custom css and tried out a lot, but i don't get it work.. can somebody help me?

The Text has a custom class called arnoschmidttype

[mariusjopen]

Dear @pauljuergens
you can try to place an image in the gridder and give it a class like image-hidden and hide it.

Then you can add a class called active with jQuery to this image, when you hover over the project title.
I think this has been discussed in this forum a couple of times.
Look for: hover, project, thumbnails, image

Hope that helped!

Best!

Marius

[pauljuergens]

Hi @mariusjopen ,

thank you for your fast respond.

i added this to my css:

#hidden-image {
display:none;
}

#hidden-image .active {
display:block;
}

and this to my javascript

<script>
jQuery(".arnoschmidttype").on("mouseenter", function () {
jQuery("this").addClass("active")
})
</script>

but it does not work...

[mariusjopen]

Dear @pauljuergens
First: I would use classes and not ids. Ids are onyl when you use the element once on the page.

As well you need to use display: block !important to actually overwrite.

And last but not least, have a look of how to call an event in LayTheme here:
http://laytheme.com/documentation.html#custom-javascript

Hope that helps! You are almost there!

Best!

Marius

[pauljuergens]

@mariusjopen thanks for all your help ! unfortunately it still doesn't work... and i don't know what i am doing wrong ...

i changed the javascript to:

<script>
jQuery(document).on("mouseenter",".type1" function(event) {
jQuery("this").addClass("active")
});
</script>

and added the !important to the css..

[mariusjopen]

Dear @pauljuergens

jQuery(document).on("mouseenter",".type1" function(event) {
jQuery(this).addClass("active")
});

Try to get rid of the "" around the this.

That might might bring you closer.

Best!

Marius

[pauljuergens]

hi @mariusjopen... its not working. i am really stuck.
i tried another method and it seems like its moving something but the image is still not there..
the method i used now was like the first one with css.
https://www.paul-juergens.de
so when you hover over seltsame tage (.type1) the space for the image is showing, but not the image.

is this my fault or is something not working.. i don't know

[mariusjopen]

Dear @pauljuergens
can you test it first in the inspector tools?
Once you know which effect you want to apply to the CSS, you can add a class with those styles.
Do not forget the !important tag to overwrite the old code.

Best!

Marius

[pauljuergens]

its really strange. @mariusjopen

when i open the inspector tools, its directly working without any change of code but only once.. it seems something ins blocking the image..

or if you go into the inspector and search for the id #img1 and turn display:none; of close the inspector and open it again and turn display:none; on again it is also working.. but only when the inspector is opened

here is a video:
https://www.paul-juergens.de/wp-content/uploads/2020/01/Bildschirmvideo-aufnehmen-2020-01-13-um-14.15.58.mov

[pauljuergens]

This post is deleted!

[pauljuergens]

ok, i solved the problem !! i added a menu and i don't know why but this fixed everything haha !

Thanks for your help @mariusjopen !!

[mariusjopen]

Dear @pauljuergens
great! Happy to hear!

Best!

Marius