Project List + Project Thumbnail on Link Hover

[comedowntous]

Hello — 

I would like to display the projects as a list where the project thumbnails appear on mouseover. I know this is something that has been brought up in the forums in the past.

http://laythemeforum.com/topic/826/hovering-over-text-showing-thumbnail

Any tips on where to start?
Thanks!

[mariusjopen]

Hi @comedowntous

you totally need advanced skills with jQuery to do this.

It is possible but like Armin already said – not easy to achieve.

Roughly:

1. You need to get the class of the image.
2. Then you position it with position fixed
3. Then you hide it
4. Then you need to write a jQuery which adds a class to it when you hover the title of the project

You will need to work with each loops.

If you are further with it – let me know and I might help in with the details.

Best!

Marius

[comedowntous]

Yes - Please. I saw an example you provided a user somewhere in the forum. I'm definitely up to the task.
Thanks!

[DAAVID]

@mariusjopen Hi Marius, I am trying to achieve almost the exact same thing explained and got stuck just before the finish line I guess..
Made a project thumbnail in Gridder and classified .projectlinks. Hid the image with CSS and want them to appear behind the Text from Thumbnail. Made a class .active + mouseenter.
Any idea what I am mixing up? Hiding the thumbnail images on the page works totally fine, but they just won't appear hovering them. (btw. getting no error in inspector console). Any help I is a lot appreciated!

CUSTOM CSS

.col[data-type="text"] img {
position: absolute;
z-index: -1;
display:none;
}
.active {
display: block!important;
}

CUSTOM <HEAD> CONTENT

<script>

jQuery(function($) {
$('a.projectlink').on('mouseenter', function(event){
$(this).addClass("active");
});
});

</script>

[arminunruh]

hey everybody,

im thinking about doing a plugin that does this one day
im sorry for not helping you how to do this in a custom way, i got too many other things to do